美文网首页
阻止默认事件,滚轮事件与滚动事件

阻止默认事件,滚轮事件与滚动事件

作者: 追逐_e6cf | 来源:发表于2018-09-08 19:33 被阅读0次

    一、阻止默认事件:
    1.默认事件:浏览器页面有很多行为:左击,右击,双击,滚轮事件。这些都是浏览器的默认自带的事件
    2.阻止默认事件:要来对这个事件进行破坏
    e.preventDefault(); 阻止默认事件
    e.returnValue = false; 兼容低版本IE
    return false; 可以阻止默认事件(注意:只能阻止DOM零级而不能阻止DOM二级)

    //DOM零级写法:
    document.oncontextmenu = function(e){
      e = e || window.event;
      console.log("已经触发右击事件!");
      e.preventDefault();
      //e.returnValue = false;
    }
    //DOM二级写法:
    document.addEventListener("contextmenu", function(e){
      e = e || window.event;
      console.log("已经触发右击事件!");
      e.preventDefault();
      //e.returnValue = false;
    });
    //return false 阻止默认事件,DOM二级不支持return false
    document.oncontextmenu = function(){
      console.log("已经触发右击事件!");
      return false;
    }
    

    二、滚轮事件与滚动事件
    1.滚动事件:window.onscroll:监听到的是浏览器的滚动条

    window.onscroll = function(){
      console.log("滚动事件触发了!");
    }
    

    2.滚轮事件:document.onmousewheel:(火狐浏览器的兼容要在DOM二级中写,DOM零级无法实现!)

    document.onmousewheel = function(){
      console.log("滚轮事件触发了!");
      return false;
    }
    //DOMMouseScroll火狐浏览器兼容写法
    document.addEventListener("DOMMouseScroll", function(e){
      e.preventDefault();
      console.log("火狐浏览器的滚轮事件");
    });
    

    三、滚轮方向
    主流浏览器滚动值:
    1.值都为120的倍数
    2.向下滚:值为负数
    向上滚:值为正数
    火狐浏览器滚动值:
    1.值都为3的倍数
    2.向下滚:值为正数
    向上滚:值为负数

    document.onmousewheel = function(e){
      console.log(e.wheelDelta);
    }
    document.addEventListener("DOMMouseScroll", function(e){
      console.log(e.detail);
    });
    

    相关文章

      网友评论

          本文标题:阻止默认事件,滚轮事件与滚动事件

          本文链接:https://www.haomeiwen.com/subject/smjlgftx.html