阻止滚轮事件

发表于   |   分类于   |     |   阅读次数

阻止默认滚轮事件

当网页有弹出层查看时,我们往往需要阻止滚轮的默认事件来保证用户体验

主流浏览器的滚轮事件为onmousewheel, 而火狐浏览器有其特殊的实现方式即DOMMouseScroll

  • 对于非IE浏览器, 使用preventDefault()方法来取消滚轮事件的默认动作,
    同时使用stopPropagation()方法来阻止当前事件的进一步冒泡行为,防止事件传播到其他节点

  • 对于IE浏览器, 将事件的returnValue属性设置为false,即returnValue = false,将事件的cancelBubble属性设置为true,即cancelBubble = true,

具体代码实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function preventDefault(e) {
    // 兼容ie
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault();
        e.stopPropagation();
    } else {
        e.cancelBubble = true
        e.returnValue = false;
    }
}
function wheel(e) {
    preventDefault(e);
}
function disable_scroll() {
    if (window.addEventListener) {
        // DOMMouseScroll 监听火狐的鼠标滚轮事件
        // 绑定事件
        window.addEventListener('DOMMouseScroll', wheel, false);
    } 
    window.onmousewheel = document.onmousewheel = wheel;
}