html js鼠标滚轮事件,javascript鼠标滚轮滚动事件

javascript如何绑定对象的鼠标滚轮事件，对对象触发鼠标滚轮事件时，如何阻止鼠标滚轮事件冒泡，不允许当前视窗滚动。

下面对主流浏览器进行了测试(firefox12，opera12.5，safari5.0.4，chrome25，IE7~8)

事件如何绑定

firefox只支持DOMMouseScroll事件，不支持onmousewheel，其他浏览器只支持onmousewheel事件，如下表所示

浏览器/事件/是否支持

firefox

opera

safari

chrome

IE

DOMMouseScroll

支持

否

否

否

否

onmousewheel

不支持

支持

支持

支持

支持

如何获取鼠标滚轮事件的数据(向上还是向下滚动)

获取鼠标滚轮事件的数据，firefox，opera可以通过事件的detail属性获取，其他浏览器通过事件的wheelDelta来获取(opera特例，2个都支持)，具体数据看下表(注意：wheelDelta和detail的滚动方向值是相反的)

浏览器/事件数据属性/数据值

firefox

opera

safari

chrome

IE

event.wheelDelta

都为undefined

向上滚动，120

向下滚动，-120

向上滚动，120

向下滚动，-120

向上滚动，120

向下滚动，-120

向上滚动，120

向下滚动，-1200

event.detail

向上滚动，-3

向下滚动，3

向上滚动，-3

向下滚动，3

都为0

都为0

都为undefined

测试代码如下

var firefox = navigator.userAgent.indexOf('Firefox') != -1;

function MouseWheel(e) {

///对img按下鼠标滚路，阻止视窗滚动

e = e || window.event;

if (e.stopPropagation) e.stopPropagation();

else e.cancelBubble = true;

if (e.preventDefault) e.preventDefault();

else e.returnValue = false;

document.title=(e.wheelDelta + '|' + e.detail)

}

window.onload = function () {

var img = document.getElementById('img');

firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : (img.onmousewheel = MouseWheel);

}

加支付宝好友偷能量挖...

2013-7-12Web开发网