本文详细介绍了在不同浏览器中如何兼容处理鼠标滚轮事件，包括IE、Chrome和Firefox的事件监听方式，以及如何通过自定义函数实现统一的滚轮上滚和下滚事件响应。同时，文章还提到了mousedown、mouseup、dblclick等其他鼠标事件的应用场景。
mousewheel 和 DOMMouseScroll 事件
mousewheel 监听滚轮发生滚动 (IE/chrome)
e.wheelDelta 120 up | -120 down
DOMMouseScroll 监听滚轮发生滚动 (firefox);
e.detail -3 up | 3 down
e.wheelDelta 和 e.detail 滚轮方向
兼容版滚轮事件
function mouseScroll({el,up,down}){
el.addEventListener("mousewheel",(e)=>{
if(e.wheelDelta > 0){
up&&up.call(el,e);
} else {
down&&down.call(el,e);
}
});
el.addEventListener("DOMMouseScroll",(e)=>{
if(e.detail < 0){
up&&up.call(el,e);
} else {
down&&down.call(el,e);
}
});
}
{
mouseScroll({
el: document,
up(){
console.log("向上滚动",this);
},down(){
console.log("向下滚动");
}})
}
mousedown、mouseup 鼠标按下抬起
拖拽案例
mousewheel、DOMMouseScroll 鼠标滚动事件
e.wheelDelta （谷歌、IE）
e.detail （火狐）
dblclick 双击
鼠标按键
长按事件
dispatchEvent(event)
扫一扫
2752
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
