更新:根据 David 提供的建议,以下是有效的修复方法:
替换
$('.scrollMe').bind("mousewheel DOMMouseScroll", ...)
使用
$('.scrollMe').bind("mousewheel DOMMouseScroll MozMousePixelScroll", ...)
原帖
Firefox 16.0.2(最新版本)绑定“鼠标滚轮/ DOMMouseScroll”事件时出现问题。 当鼠标指针位于我所定位的div上方时,使用鼠标滚轮滚动会导致窗口也滚动-而我显然不希望这样。
我尝试了添加多种方法来停止传播等,但似乎没有效果。
Javascript代码:
$(document).ready(function() {
$('.scrollMe').bind("mousewheel DOMMouseScroll", function(e) {
e.stopImmediatePropagation();
e.stopPropagation();
e.preventDefault();
var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);
$(this).empty();
return false;
});
});
请点击下方的jsFiddle链接查看实际效果。在示例页面中,只需将鼠标指针放置在带有红色框的div内部,并使用鼠标滚轮。Firefox第一次会滚动父窗口(出人意料),而其他浏览器则不会。
奇怪的是,Firefox在绑定元素上触发事件后不会再次发生这种行为,这意味着它停止滚动页面。但是,如果你手动滚动页面并再次尝试,它会再次重复这种行为。
我还在IE9和Chrome中进行了测试,但没有发现这个问题(意味着它们不会意外地滚动窗口),所以我猜测这是Firefox特有的(也禁用了firefox中的每个插件等)。
这是Firefox的一个真正的bug吗(如果是,是否有跨浏览器的hack可以解决)?或者,如果你知道任何其他解决方案来实现捕获鼠标滚轮事件而不会滚动页面的窗口,请随时回答!