I've add a mousedown
event to <body>
using jQuery's .bind()
function like the following code:
$('body').bind('mousedown', function(){alert(1)});
It works perfectly else anywhere on the page. But it will be blocked by(???) a "map" div. (I have no clue whether it is precise enough to say "blocked by" or not, the word coming out with my feeling)
and the function .mousedown()
don't work neither:
$('body').mousedown(function(){alert(1)});
the following is the map div using OpenLayers:
<script type='text/javascript'>
var map;
function init() {
var controls_array = [
new OpenLayers.Control.Navigation({}),
new OpenLayers.Control.PanZoomBar({}),
new OpenLayers.Control.LayerSwitcher(),
];
var mapOptions = {
controls: controls_array,
projection: new OpenLayers.Projection("EPSG:900913")
};
map = new OpenLayers.Map('map', mapOptions);
var googleLayer = new OpenLayers.Layer.Google(
'Google Map Layer',
{
numZoomLevels: 20,
isBaseLayer: true,
sphericalMercator: true,
projection: "EPSG:900913"
}
);
map.addLayer(googleLayer);
map.zoomToExtent(
new OpenLayers.Bounds(3235795.723665,493480.6015713,
3716431.757455,911132.5240634), true
);
}
</script>
<body onload='init();'>
<div id="map" style='width: 800px; height: 700px;'></div>
</body>
The problem is that it works outside the "map" div, but when I mousedown
on the map, it doesn't alert message.
However, the following event mouseup
both works no matter inside/outside the "map" div:
$('body').bind('mouseup', function(){alert(1)});
$('body').mouseup(function(){alert(1)});
I guess it is because the OpenLayers.Controls.DragPan()
function reacting with the mousedown
event.
So how should I do to fix it? Let the event pass through to <body>
?
OpenLayers have its own eventListener, so you need to override them, for example
map.events.listeners.mousedown.unshift({
func: function(){
alert('hola muheres');
}
});