mousewheel,wheel和DOMMouseScroll在JavaScript中 [英] mousewheel,wheel and DOMMouseScroll in JavaScript
问题描述
>似乎适用于Firefox和chrome。这是什么?没有找到这个文件。
mousewheel
不适用于Firefox。
为了获得最佳浏览器兼容性,我应该如何使用它们。
给出的示例:
document.addEventListener('ScrollEvent',function(e){
DoSomething();
});
我建议将其中三个用于同时覆盖所有浏览器。
注意:
-
在Firefox的版本中,
轮
和DOMMouseScroll
事件被支持,我们需要一种方法来指示浏览器只执行轮
,而不是两者。如下所示:if(onwheel在窗口中)...
-
上述检查虽然在
IE9
和IE10
将失败,因为即使这些浏览器支持轮
事件,他们没有onwheel
属性。为了反驳我们可以使用下面所示的标志。 -
我相信
e.deltaY
,e.wheelDelta
和e.detail
除了帮助我们确定滚动的方向以外,因此在下面的解决方案-1
和1
将被退回。
片段:
/ *它决定是否支持车轮事件。 * / var supportsWheel = false; / *触发事件时运行的函数。 * / function DoSomething(e){/ *检查轮事件是否受支持。 * / if(e.type ==wheel)supportsWheel = true; else if(supportsWheel)return; / *确定滚动的方向(< 0→向上,> 0→向下)。 * / var delta =((e.deltaY || -e.wheelDelta || e.detail)>>> 10)|| 1; / * ... * / console.log(delta);} / *为每个事件添加事件侦听器。 * / document.addEventListener('wheel',DoSomething); document.addEventListener('mousewheel',DoSomething); document.addEventListener('DOMMouseScroll',DoSomething);
/ div>
自从发布问题已经过去了3年了相信今后绊倒的人会受益于这个答案,所以请随便提出建议/做出改进。
DOMMouseScroll
only works for Firefox.
wheel
seems to work for both Firefox and chrome. What is this? Haven't found docs on this one.
mousewheel
doesn't work for Firefox.
How should I use them, in order to gain best browser-compatibility.
Example given:
document.addEventListener('ScrollEvent', function(e){
DoSomething();
});
I would suggest that all three of them be used at the same time to cover all browsers.
Notes:
In versions of Firefox where both the
wheel
andDOMMouseScroll
events are supported, we need a way to instruct the browser to execute onlywheel
and not both. Something like the following:if ("onwheel" in window) ...
The above check though, in the case of
IE9
andIE10
will fail, because even though these browsers support thewheel
event, they don't have theonwheel
attribute in DOM elements. To counter that we can use a flag as shown later on.I believe the number returned by
e.deltaY
,e.wheelDelta
ande.detail
is not useful other than helping us determine the direction of the scroll, so in the solution below-1
and1
will be returned.
Snippet:
/* The flag that determines whether the wheel event is supported. */
var supportsWheel = false;
/* The function that will run when the event are triggered. */
function DoSomething (e) {
/* Check whether the wheel event is supported. */
if (e.type == "wheel") supportsWheel = true;
else if (supportsWheel) return;
/* Determine the direction of the scroll (< 0 → up, > 0 → down). */
var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
/* ... */
console.log(delta);
}
/* Add the event listeners for each event. */
document.addEventListener('wheel', DoSomething);
document.addEventListener('mousewheel', DoSomething);
document.addEventListener('DOMMouseScroll', DoSomething);
Although almost 3 years have passed since the posting of the question, I believe people who stumble upon it in the future will benefit from this answer, so feel free to suggest/make improvements to it.
这篇关于mousewheel,wheel和DOMMouseScroll在JavaScript中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!