javascript - GMaps v3: How to cancel mouse scroll events before they scroll map - Stack Overflow

admin管理员组

文章数量:1305482

Using Google maps v2, I was able to stop mouse scroll (DOMMouseScroll) events from going to the map and zooming the map by handling and cancelling the mouse scroll events. However, in v3, that no longer works.

Here is an example. Try to scroll through the text with the mouse wheel

Notice how drags, and double clicks are cancelled before they get to the map, however if you try to scroll through the text, then the DOMMouseScroll event goes right through to the map.

The code to cancel events is basically the same as v2 and looks like this:

  // Set the overlay's div_ property to this DIV
  this.div_ = div;

  var cancelEvent = function(e)
  {

        if( (navigator.userAgent.toLowerCase().indexOf('msie') != -1    && document.all) ||
                  navigator.userAgent.indexOf('Opera') > -1)  {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        } else {
            e.stopPropagation();
        }

        return false;
  }

  var panes = this.getPanes();
  panes.floatPane.appendChild(div);

  var stealEvents = [ 'mousedown', 'dblclick', 'DOMMouseScroll', 'onmousewheel', 'drag'];

  for( i=0; i < stealEvents.length; i++ ){
    google.maps.event.addDomListener(this.div_, stealEvents[i], cancelEvent);
  }


    // for IE/Opera
    if( (navigator.userAgent.toLowerCase().indexOf('msie') != -1    && document.all) || 
                    navigator.userAgent.indexOf('Opera') > -1)  {
        this.div_.attachEvent('onmousewheel', cancelEvents);
    }

    // for safari
    if ( navigator.userAgent.indexOf('AppleWebKit/') > -1)  {
        this.div_.onmousewheel = cancelEvents;
    }

Using Google maps v2, I was able to stop mouse scroll (DOMMouseScroll) events from going to the map and zooming the map by handling and cancelling the mouse scroll events. However, in v3, that no longer works.

Here is an example. Try to scroll through the text with the mouse wheel

Notice how drags, and double clicks are cancelled before they get to the map, however if you try to scroll through the text, then the DOMMouseScroll event goes right through to the map.

The code to cancel events is basically the same as v2 and looks like this:

  // Set the overlay's div_ property to this DIV
  this.div_ = div;

  var cancelEvent = function(e)
  {

        if( (navigator.userAgent.toLowerCase().indexOf('msie') != -1    && document.all) ||
                  navigator.userAgent.indexOf('Opera') > -1)  {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        } else {
            e.stopPropagation();
        }

        return false;
  }

  var panes = this.getPanes();
  panes.floatPane.appendChild(div);

  var stealEvents = [ 'mousedown', 'dblclick', 'DOMMouseScroll', 'onmousewheel', 'drag'];

  for( i=0; i < stealEvents.length; i++ ){
    google.maps.event.addDomListener(this.div_, stealEvents[i], cancelEvent);
  }


    // for IE/Opera
    if( (navigator.userAgent.toLowerCase().indexOf('msie') != -1    && document.all) || 
                    navigator.userAgent.indexOf('Opera') > -1)  {
        this.div_.attachEvent('onmousewheel', cancelEvents);
    }

    // for safari
    if ( navigator.userAgent.indexOf('AppleWebKit/') > -1)  {
        this.div_.onmousewheel = cancelEvents;
    }

• javascript
• google-maps
• google-maps-api-3
• overlay
• dom-events

Share Improve this question Follow edited Jul 7, 2019 at 18:50 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 1, 2013 at 16:11 asdflkadslkfadsfjasdadsfsadasdflkadslkfadsfjasdadsfsad 37955 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

When initializing the V3 Map you can specify an option to disable scrollwheel zooming:

var mapOptions = {
  center: new google.maps.LatLng(-34.397, 150.644),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

Google Map V3 - Map Options

The option you are looking for is scrollwheel - you want to set that to False - by default this set to True.

Awesome answer from John, I couldn't ment [due to rep] so I'm answering this way - even though the answer has been accepted (about two years ago).

Apparently JS's booleans are lowercase, so the correct code is:

var mapOptions = {
  center: new google.maps.LatLng(-34.397, 150.644),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  scrollwheel: false
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

本文标签： javascriptGMaps v3 How to cancel mouse scroll events before they scroll mapStack Overflow