html鼠标滑轮事件,JavaScript系列之鼠标滚轮事件

鼠标滚轮事件

当在被绑定的对象上(如：某个div或者doucument)发生鼠标滚轮滚动时触发。

在不同的浏览器中有不同的表现形式：

一、ie/chrome下的事件 :　onmousewheel

事件绑定方式：on 或者 addEventListener[attachEvent]

获取滚轮事件具体信息：event.wheelDelta

向上滚动up：120

向下滚动down: -120

二、firefox 下的事件: DOMMouseScroll

事件绑定方式：addEventListener

获取滚轮事件具体信息：event.detail

向上滚动up: -3

向下滚动down: 3

/*

封装一个函数：

obj 需要加鼠标滚轮事件的对象

upFn 当滚轮向上滚动时执行的函数

downFn 当滚轮向下滚动时执行的函数

*/

function wheel(obj,upFn,downFn) {

if(arguments.length < 3){

alert('Sorry,你输入的参数不够');

}

obj.onmousewheel = fn;

obj.addEventListener && obj.addEventListener('DOMMouseScroll',fn,false);

function fn(ev){

var ev = ev || window.event;

var bool = true;

if(ev.wheelDelta){

bool = ev.wheelDelta > 0 ? true : false;

}else if(ev.detail){

bool = ev.detail < 0 ? true : false;

}

bool && upFn();

(!bool) && downFn();

//prevent(ev);

}

}

都存在的问题

当页面本身就存在滚动条时就会出现异常，解决办法：阻止浏览器的默认行为

ie：returnValue = false

DOM：preventDefault()

/*

阻止默认行为函数

*/

function prevent(evt){

if(evt.preventDefault){

evt.preventDefault();

}else{

evt.returnValue = false;

}

}

//将wheel函数中的prevent(ev)前注释去掉即可