JS事件-鼠标滚轮事件

标签：

之前学习了onmouseover，onmousedown等鼠标事件，今天来看看鼠标的滚轮事件，浏览器兼容一直是让人比较恶心的事情，今天就让我们将恶心进行到底，看看这个恶心的鼠标滚轮事件！

鼠标滚轮事件在IE和谷歌浏览器Chrome下是通过onmousewheel这个事件实现的，但是火狐FF下却不识别onmousewheel，在FF下需要用DOMMouseScroll，并且必须用“事件监听”方式添加事件才有效；

而大家都知道“事件监听”方式绑定事件：

IE下是通过attachEvent实现事件监听

而Chrome和FF下通过addEventListener  来实现事件监听

这个场面是够恶心了：

事件监听                  滚轮事件

谷歌   addEventListener         onmousewheel

 IE       attachEvent                 onmousewheel

 FF     addEventListener         DOMMouseScroll

  为了浏览器兼容，我们自己封装一个“绑定事件的函数”

function addEvent(obj,xEvent,fn) {
    if(obj.attachEvent){
      obj.attachEvent('on'+xEvent,fn);
    }else{
      obj.addEventListener(xEvent,fn,false);
    }
}

window.onload = function () {
  //接着利用我们自己封装的函数给div绑定事件，
  var oDiv = document.getElementById('div1');
  addEvent(oDiv,'mousewheel',onMouseWheel);
  addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
  // 当滚轮事件发生时，执行onMouseWheel这个函数
  function onMouseWheel() {
    alert('haha');
  }
} 

在IE和Chrome下通过event.wheelDelta的返回值可以知道滚轮是向上滚的还是向下滚的

当返回值为正值的时候，说明是向上滚

当返回值是负值的时候，说明是向下滚

但是event.wheelDelta在火狐下并不起作用，在火狐下需要通过event.detail来知道滚轮是向上滚的还是向下滚，火狐下还有一点不同：

当返回值为正值的时候，说明是向下滚

当返回值是负值的时候，说明是向上滚

接下来，实现当滚轮向下滚动时div的高度增大，向上滚时div高度减小

1. 需要定义一个标志位，标志滚轮是向上滚还是向下滚

2. 需要做浏览器兼容

3. 还要阻止浏览器默认行为

window.onload = function () {
        var oDiv = document.getElementById('div1');
 
        function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
            var ev = ev || window.event;
            var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
                down = ev.wheelDelta?ev.wheelDelta<0:ev.detail>0;
            if(down){
                oDiv.style.height = oDiv.offsetHeight+10+'px';
            }else{
                oDiv.style.height = oDiv.offsetHeight-10+'px';
            }
            if(ev.preventDefault){/*FF 和 Chrome*/
                ev.preventDefault();// 阻止默认事件
            }
            return false;
        }
        addEvent(oDiv,'mousewheel',onMouseWheel);
        addEvent(oDiv,'DOMMouseScroll',onMouseWheel);
     }
    function addEvent(obj,xEvent,fn) {
        if(obj.attachEvent){
            obj.attachEvent('on'+xEvent,fn);
        }else{
            obj.addEventListener(xEvent,fn,false);
        }
    }

JS事件-鼠标滚轮事件

标签：

原文地址：http://blog.csdn.net/u014205965/article/details/46045099