滚轮_阻止默认行为_滚零事件兼容

最新推荐文章于 2024-05-27 08:28:52 发布

梁什么鸭，

最新推荐文章于 2024-05-27 08:28:52 发布

阅读量352

点赞数

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/lm_choose_live/article/details/117920967

版权

Javascript 专栏收录该内容

74 篇文章 2 订阅

订阅专栏

文章目录

滚轮事件
默认行为
滚轮事件兼容
滚轮事件的兼容

滚轮事件

onmousewheel 滚轮事件火狐不兼容

兼容火狐： DOMMouseScroll
虽然type不同，但是DOMMouseScroll 不能使用DOM 0级绑定

滚轮的滚动方向：
主流览器： e.wheelDelta 向前滚动：150的倍数向后：-150的倍数
火狐： e.detail 向前滚动：-3的倍数向后：3的倍数

window.onload = function () {
            document.addEventListener("mousewheel", (e) => {
                e = e || window.event;
                e.preventDefault()   // 阻止默认行为

                console.log(e.wheelDelta);
            })
        }

默认行为

默认行为：滚动条右键菜单。浏览器自带的

设置页面的时候，有时会需要滚动某个区的内容，在滚动这个区的内容时，不会滚动整个页面。这时就要阻止默认行为
在这里插入图片描述

e.preventDefault() : 阻止默认行为，不兼容低版本IE

e.returnValue = false; : 用于在IE中阻止默认行为的

return false; : 阻止默认行为，在DOM 0级事件里可以使用
可以写成行内事件：

<html oncontextmenu= "return false">

阻止右键菜单弹出的栗子：

<script>
    window.onload = function () {
      /*
        默认行为 ：滚动条 右键菜单

        e.preventDefault()  : 阻止默认行为，不兼容低版本IE

        e.returnValue = false; : 用于在IE中阻止默认行为的

        return false; : 阻止默认行为，在DOM 0级事件里可以使用

        可以写成行内事件： <html oncontextmenu= "return false">
      */

      document.oncontextmenu = function (e) {
        // e.preventDefault()
        // e.returnValue = false;
        e = e || window.event;
        e.returnValue = false;
      }
      // 阻止了右键菜单的弹出
    };
  </script>

<body style="height: 2000px">
  <div>123456</div>
</body>

滚轮事件兼容

1、判断是不是火狐浏览器

	if (dom.DOMMouseScroll) { } 
    // 这样判断是错误的
    // 虽然火狐支持这种写法，但它本身就不支持DOM 0级绑定，这样判断没意义，火狐不会认
    // 这样写不管是不是火狐，都是undefined
    
    // 支持但没有的事件默认值 null，不支持的事件类型是undefined
    var type = "mousewheel";
    if (dom.onmousewheel === undefined) {
      type = "DOMMouseScroll";
    }

2、阻止默认行为，设置统一的滚动方向

// 阻止默认行为应该在函数执行的时候触发，要在事件函数里面做

        // 真正的事件函数？ ：把函数的事件对象的属性以及对应的值处理好，再返回给用户
        // 处理滚轮方向的问题
        function typeFn(e) {
          /*
            设置统一的滚动方向为： wheelDetail  正值向前，负值向后
          */
          e = e || window.event;

          // 把滚轮事件的方向处理一致
          // 内置对象有可能不可以被扩展属性的，即属性只可读不可写、不可被遍历
          // 那么可以自定义属性，并在函数前注释说明这个自定义属性的作用
          e.wheelDetail = e.wheelDelta / 150 || e.detail / -3;

        }

3、只要用到滚轮事件，百分之九十都需要阻止默认行为。阻止默认行为有兼容问题，所以不能直接用e
那么可以提供第三个参数，来设置阻不阻止默认行为
true 阻止， false 不阻止

if (!!bool) { // 强转一下，比较靠谱，直接写也可
            // 阻止默认行为
            if (e.preventDefault) {
              e.preventDefault();
            }
            else {
              e.returnValue = false;

            }
          }

4、设置回调函数 this指向

		  //cb(); // 此时cb自执行，当调用mousewheel 函数时，this指向window
          //cb.call(this); // 此时this 指向dom
          cb.call(this, e); // e是回调函数的第一个形参

5、设置监听事件的兼容，判断是不是IE浏览器

// 经过上面代码，到这type一定是当前滚轮事件的名称
        // IE不支持addEventListener
        // 判断是不是IE
        if (dom.addEventListener) {
          dom.addEventListener(type, typeFn);
        }else {
          dom.attachEvent("on"+type, typeFn);
        }
      }

滚轮事件的兼容

封装成一个函数，做成一个 js 文件，之后需要直接调用

// dom 是要滚动的区域盒子名
// cb 回调函数
function mousewheel(dom, cb, bool) { 

    var type = "mousewheel";
    if (dom.onmousewheel === undefined) {
        type = "DOMMouseScroll";
    }
    function typeFn(e) {
        e = e || window.event;

        e.wheelDetail = e.wheelDelta / 150 || e.detail / -3;


        if (!!bool) { // 强转一下，比较靠谱，直接写也可
            // 阻止默认行为
            if (e.preventDefault) {
                e.preventDefault();
            }
            else {
                e.returnValue = false;

            }
        }

        cb.call(this, e); // e是回调函数的第一个形参
    }
    if (dom.addEventListener) {
        dom.addEventListener(type, typeFn);
    }else {
        dom.attachEvent("on"+type, typeFn);
    }
}

梁什么鸭，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
滚轮_阻止默认行为_滚零事件兼容

滚轮事件onmousewheel 滚轮事件火狐不兼容兼容火狐： DOMMouseScroll虽然type不同，但是DOMMouseScroll 不能使用DOM 0级绑定滚轮的滚动方向：主流览器： e.wheelDelta 向前滚动：150的倍数向后：-150的倍数火狐： e.detail 向前滚动：-3的倍数向后：3的倍数window.onload = function () { document.addEventListener("mousew
复制链接

扫一扫