mousewheel 和 DOMMouseScroll 事件
mousewheel 监听滚轮发生滚动 (IE/chrome)
e.wheelDelta 120 up | -120 down
DOMMouseScroll 监听滚轮发生滚动 (firefox);
e.detail -3 up | 3 down
e.wheelDelta 和 e.detail 滚轮方向
![](https://img.haomeiwen.com/i12421083/d8f2c5c4b63a81b9.png)
兼容版滚轮事件
![](https://img.haomeiwen.com/i12421083/1f46a9a71ce2acee.jpg)
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 鼠标按下抬起
拖拽案例
![](https://img.haomeiwen.com/i12421083/a73a96e45d46977c.jpg)
mousewheel、DOMMouseScroll 鼠标滚动事件
e.wheelDelta (谷歌、IE)
e.detail (火狐)
![](https://img.haomeiwen.com/i12421083/a8c0585a46107ae5.png)
dblclick 双击
![](https://img.haomeiwen.com/i12421083/2e382e6917486e95.png)
鼠标按键
![](https://img.haomeiwen.com/i12421083/dfb66c1673b0ee6e.png)
长按事件
dispatchEvent(event)
![](https://img.haomeiwen.com/i12421083/f612c99cca1cd704.png)
网友评论