如何在HTML5页面中使用鼠标滚轮事件

支持鼠标滚轮可以为HTML5网页增加更多的交互性。 除了滚动页面&＃xff0c;您还可以执行其他操作&＃xff0c;例如放大或缩小。

查看鼠标滚轮演示页面…

大多数浏览器支持任何元素的“ mousewheel”事件。 您可以注册传递事件对象的处理函数。 这暴露了wheelDelta属性&＃xff1b; 向上滚动为正值或向下滚动为负值。 值越大或越小&＃xff0c;移动越大。

不幸的是&＃xff0c;有一个浏览器不支持“ mousewheel”事件。 您错了&＃xff1a; 是Firefox 。 Mozilla已实现“ DOMMouseScroll”事件。 这将传递具有detail属性的事件对象&＃xff0c;但是与wheelDelta不同&＃xff0c;它返回用于向下滚动的正值。 因此&＃xff0c;直到Mozilla采纳该活动&＃xff0c;我们才有一个奇怪的情况&＃xff0c;那就是为IE6编写代码实际上要容易一些&＃xff01; 那不是你每天听到的话。

您还应该注意&＃xff0c;Apple在Safari中禁用了滚轮&＃xff0c;但是Webkit引擎提供了支持&＃xff0c;因此您的代码不会引起任何问题。

添加鼠标滚轮事件处理程序

让我们向网页添加一个图像&＃xff0c;该图像将根据鼠标滚轮进行放大和缩小&＃xff1a;

现在&＃xff0c;我们可以附加mousewheel事件处理程序&＃xff1a;


var myimage &＃61; document.getElementById("myimage");
if (myimage.addEventListener) {// IE9, Chrome, Safari, Operamyimage.addEventListener("mousewheel", MouseWheelHandler, false);// Firefoxmyimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else myimage.attachEvent("onmousewheel", MouseWheelHandler);


跨浏览器鼠标滚轮事件处理功能

现在&＃xff0c;我们的MouseWheelHandler可以确定滚轮运动增量。 在这种情况下&＃xff0c;我们将反转Firefox的detail值&＃xff0c;并返回1&＃xff08;向上&＃xff09;或-1&＃xff08;向下&＃xff09;&＃xff1a;


function MouseWheelHandler(e) {// cross-browser wheel deltavar e &＃61; window.event || e; // old IE supportvar delta &＃61; Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));


现在我们可以相应地调整图像的大小。 下面的代码将宽度设置为50像素到800像素之间&＃xff0c;但是您可以确定图像的自然尺寸并使用它。

myimage.style.width &＃61; Math.max(50, Math.min(800, myimage.width &＃43; (30 * delta))) &＃43; "px";return false;
}


最后&＃xff0c;我们返回false来取消通常会滚动页面的标准事件。

查看鼠标滚轮演示页面…

该代码可在包括IE6、7和8在内的所有浏览器中使用&＃xff0c;但Safari用户将看不到任何情况。

如果您喜欢阅读这篇文章&＃xff0c;那么您会喜欢Learnable的 &＃xff1b; 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程&＃xff0c;例如针对真实世界的HTML5和CSS3 。

本文的评论已关闭。 对HTML有疑问吗&＃xff1f; 为什么不在我们的论坛上提问呢&＃xff1f;

From: https://www.sitepoint.com/html5-Javascript-mouse-wheel/