悬停Google Map时禁用鼠标EventListener

Question

I added 2 EventListener(s) in order to control the scroll and have it fluid and smooth on Chrome (especially), which by default has a horrible behavior.

if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

var time = 1300;
var distance = 270;

function wheel(event) {
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;

    handle();
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

function handle() {

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time);
}


$(document).keydown(function (e) {

    switch (e.which) {
        //up
        case 38:
            $('html, body').stop().animate({
                scrollTop: $(window).scrollTop() - distance
            }, time);
            break;

            //down
        case 40:
            $('html, body').stop().animate({
                scrollTop: $(window).scrollTop() + distance
            }, time);
            break;
    }
});

Everything's working perfectly except that I need to add a Google Maps API v3 map. And it has another EventListener that zooms in and out when mouse is hovering the map and you use the mouse wheel. How can I disable my script when mouse is hovering the map? Here's the link the my page (you can see the behavior), live: http://www.rendezvousroma.it/new/contatti.php

Answer 1

(I'm not sure if I understand the question correctly)

For me your script doesn't work at all when the mouse is over the map. When I use the mousewheel over the map the map will be zoomed but the page doesn't scroll(I guess that's the desired behaviour)

There is only the queue of the currently running animation that will scroll the page when you are over the map. When this is what you want to avoid, observe the mouseover -event of the map and stop the animation:

  google.maps.event.addListener(map,'mouseover',function(e){
    $('html, body').stop();
  });

To prevent the page from scrolling in Firefox add this too:

  google.maps.event.addDomListener(map.getDiv(),'DOMMouseScroll',function(e){
    e.stopPropagation();
  });

It should prevent the event from bubbling up to the document.

Answer 2

将其放在div： style="user-select: none; pointer-events: none;"