资讯专栏INFORMATION COLUMN

JavaScript系列之鼠标滚轮事件

vspiders / 2341人阅读

摘要:鼠标滚轮事件当在被绑定的对象上如某个或者发生鼠标滚轮滚动时触发。

鼠标滚轮事件
当在被绑定的对象上(如:某个div或者doucument)发生鼠标滚轮滚动时触发。

在不同的浏览器中有不同的表现形式:

一、ie/chrome下的事件 : onmousewheel

事件绑定方式:on 或者 addEventListener[attachEvent]

获取滚轮事件具体信息:event.wheelDelta

     向上滚动up:120 
     向下滚动down: -120
二、firefox 下的事件: DOMMouseScroll 

事件绑定方式:addEventListener

获取滚轮事件具体信息:event.detail

     向上滚动up: -3
     向下滚动down: 3
/*
    封装一个函数:
    obj  需要加鼠标滚轮事件的对象
    upFn  当滚轮向上滚动时执行的函数
    downFn  当滚轮向下滚动时执行的函数

*/

function wheel(obj,upFn,downFn) {

    if(arguments.length < 3){
        alert("Sorry,你输入的参数不够");
    }

    obj.onmousewheel = fn;  

    obj.addEventListener && obj.addEventListener("DOMMouseScroll",fn,false);

    function fn(ev){

        var ev = ev || window.event;

        var bool = true;

        if(ev.wheelDelta){
            bool = ev.wheelDelta > 0 ? true : false;
        }else if(ev.detail){
            bool = ev.detail < 0 ? true : false;
        }

        bool && upFn();
        (!bool) && downFn();

        //prevent(ev);

    }
}


都存在的问题

当页面本身就存在滚动条时就会出现异常,解决办法:阻止浏览器的默认行为
ie:returnValue = false
DOM:preventDefault()
/*
    阻止默认行为函数
*/
function prevent(evt){

    if(evt.preventDefault){
        evt.preventDefault();
    }else{
        evt.returnValue = false;
    }

}

//将wheel函数中的prevent(ev)前注释去掉即可

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/87549.html

相关文章

  • JavaScript系列事件类型

    摘要:有两种事件处理程序的方式。第一种第二种事件当调整浏览器的窗口到一个新的宽度或高度时,就会触发事件。事件在元素获得焦点时触发。这个事件冒泡某些浏览器不支持。事件在鼠标光标从元素外部首次移动到元素范围内时触发。事件这个事件跟踪鼠标滚轮。 JavaScript简单入门可以看看我丑丑的Github博客JavaScript简单入门 本文主要简单介绍以下几类事件: UI事件 焦点事件 鼠标与滚轮...

    chanthuang 评论0 收藏0
  • JavaScript 笔记 —— 鼠标事件的浏览器差异

    摘要:本文总结一下,鼠标事件在不同浏览器实现的差异。和相关元素差异和是级事件当中的其中两个事件。标准事件对象使用属性来识别鼠标按键。该事件当中的值与事件对象当中的作用相同。 鼠标是我们在 PC 端浏览网页时候最重要的交互工具,因此鼠标事件也是 Web 开发当中最常用的一类事件。然而,由于各种原因,不同厂商或者不同版本的浏览器之间对于鼠标事件的实现也有所不同。本文总结一下,鼠标事件在不同浏览器...

    haoguo 评论0 收藏0
  • 一文读懂鼠标滚轮事件(wheelEvent)

    摘要:下面正式推荐大神的博文前段时间使用做滚动条控件,添加滚轮事件时,查阅了一些资料,发现大都是文档描述或简单示例,对于开发者还是不够。一测试目标探索事件中常用属性的有效性,垂直步进算法滑动幅度以及与电脑个性化设置的关联。 最近在用VUE写一个后台管理系统,顶部标签页涉及鼠标滚轮事件,由于每个浏览器对滚轮事件的处理方式不一样,个人对这个又不懂,折腾了很久,参考了大神的代码,也把百度翻烂了,找...

    doodlewind 评论0 收藏0
  • JavaScript 事件——“事件类型”中“焦点、鼠标滚轮事件”的注意要点

    摘要:焦点事件一般利用这些事件与方法和属性配合。此外,支持一个名为的类似事件,也是在鼠标滚动滚轮时除法。 焦点事件 一般利用这些事件与document.hasFocus()方法和document.activeElement属性配合。主要有: blur:元素失去焦点,不会冒泡; DOMFocusIn:同HTML事件focus,于DOM3遭废弃,选用focusin; DOMFocusOut:同...

    clasnake 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<