【兼容】鼠标滚轮兼容性问题

最新推荐文章于 2023-02-27 09:33:26 发布

小孙小孙睡不醒

最新推荐文章于 2023-02-27 09:33:26 发布

阅读量307

点赞数

文章标签： firefox javascript chrome

本文链接：https://blog.csdn.net/sylbiubiubiu/article/details/126674160

版权

本文探讨了在Chrome和Firefox等浏览器中遇到的鼠标滚轮事件的兼容性问题。通过使用DOM2标准形式的事件监听，可以有效地解决这一问题，确保在不同浏览器上实现一致的行为。

摘要由CSDN通过智能技术生成

鼠标滚轮兼容性问题

###鼠标滚轮事件
	ie/chrome : onmousewheel(dom0)
				event.wheelDelta
					上：120
					下：-120
				
	firefox : DOMMouseScroll 必须用(dom2的标准模式)
				event.detail
					上：-3
					下：3


###阻止dom2的默认行为
	if(e.preventDefault){
		e.preventDefault();
	}
			
			
###阻止dom0的默认行为
	return false;

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #test{
            width: 200px;
            height: 200px;
            background: pink;
            position: absolute;// 实现元素居中
            left: 0;
            right: