鼠标滚轮控制图片缩放

当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document(IE)或window(Opera、Chrome、及Safari)对象。

 

在IE中触发的是mousewheel事件。

在火狐中触发的DOMMouseScroll 事件。

 

在使用的时候分别为元素绑定两个事件就可以了。

标准浏览器用 e.preventDefault(); 再来个取消冒泡 e.stopPropagation(); 即可。

 

直接e.preventDefault()的话，IE中会报错不支持此方法，所以要加个判断。

if(e.preventDefault){

     e.preventDefault()

  }

 

 

 

IE低版本不支持此方法，需要用 returnValue=flase 来阻止默认事件;

慎用 return false;

 

 getWheelDelta: function (event) {
 
        if (event.wheelDelta) {   //IE 浏览器  返回正负120
            return  event.wheelDelta;
        } 
       else{                      //标准浏览器 返回 正负 3
            return -event.detail*4;
        }
    }

 

演示：