Search code examples
jquerydomopenlayersjquery-events

Body missing mousedown event with Openlayers


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>?


Solution

  • OpenLayers have its own eventListener, so you need to override them, for example

    map.events.listeners.mousedown.unshift({ 
        func: function(){
            alert('hola muheres');
        }
    });