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);
}
加支付宝好友偷能量挖...
-7-12Web开发网
如果觉得《html js鼠标滚轮事件 javascript鼠标滚轮滚动事件》对你有帮助,请点赞、收藏,并留下你的观点哦!