zoukankan      html  css  js  c++  java
  • 各浏览器中的鼠标滚轮事件处理

    滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍。

    Firefox使用DOMMouseScroll,其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息,其他的浏览器使用wheelDelta。不知道为何在该问题上其他厂商和微软的如此一致。Firefox可以使用addEventListener方法绑定DomMouseScroll事件。

    elem.addEventListener('DOMMouseScroll', func, false);IE和其他的主流浏览器可以使用传统的事件绑定模型。但不要使用IE专有的attachEvent方法,其他主流浏览器并不识别微软的这个方法。

    <script type="text/javascript">
        // <![CDATA[
        var mouseWheel = document.getElementById('mouseWheel');
        if (mouseWheel.addEventListener) {
            mouseWheel.addEventListener('DOMMouseScroll', function(event) {
                event.target.innerHTML = event.detail;
                event.stopPropagation();
                event.preventDefault();
            }, false);
        }
        mouseWheel.onmousewheel = function(event) {
            event = event || window.event;
            mouseWheel.innerHTML = event.wheelDelta;
            event.returnValue = false;
        }
        // ]]>
    </script>

    测试之后得到如下的结论。

    •Firefox 鼠标滚轮向上滚动是-3,向下滚动是3
    •IE 鼠标滚轮向上滚动是120,向下滚动是-120
    •Safari 鼠标滚轮向上滚动是360,向下滚动是-360
    •Opera 鼠标滚轮向上滚动是120,向下滚动是-120
    •Chrome 鼠标滚轮向上滚动是120,向下滚动是-120
    有人在Safari下做了一些测试:”只是滚动一圈的话,值为+-0.1,如果滚动地稍微快点的话(多滚动几圈),这个值也会变大。 这是因为Mac OS下有鼠标滚轮加速功能。滚动一次,浏览器滚动1像素,滚动3次,浏览器却滚动30像素”。同时他也对Camino(基于Gecko的内核引擎)进行研究:“与Safari相似(+- 0.3 to +-Infinity),虽然使用了与firefox相同的内核引擎,但结果这个delta值却只在+-2.666666里浮动,无论滚动速度如何

    例1 获取鼠标滚轮值,判断滚动方向

    JavaScript获取鼠标滚轮值,这里的值只有“1”和“-1”两种情况,请选按着中轮滚动,激活后可以不按,直接滚动。程序根据取值可以判断出滚轮的滚动方向,是向上滚还是向下滚,在编写JS游戏的时候我们要用到本功能。

    <html>
    <head>
    <title>JavaScript判断鼠标滚轮滚动方向- www.fengfly.com </title>
    <script type="text/javascript">
    function handle(delta) {
        var s = delta + ": ";
        if (delta <0)
            s += "您在向下滚……";
        else
            s += "您在向上滚……";
        document.getElementById('delta').innerHTML = s;
    }//from www.fengfly.com
    function wheel(event){
        var delta = 0;
        if (!event) event = window.event;
        if (event.wheelDelta) {
            delta = event.wheelDelta/120; 
            if (window.opera) delta = -delta;
        } else if (event.detail) {
            delta = -event.detail/3;
        }
        if (delta)
            handle(delta);
    }
    if (window.addEventListener)
    window.addEventListener('DOMMouseScroll', wheel, false);
    window.onmousewheel = document.onmousewheel = wheel;
    </script>
    </head>
    <body>
    <div id="delta">滚动中轮试试~请选按着中轮滚动,激活后可以不按,直接滚动。 </div>
    <p>shared by http://www.111cn.net</p>
    </body>
    </html>
  • 相关阅读:
    DataSet数据导出为Excel文档(每个DataTable为一个Sheet)
    K2 Blackpearl 4.6.8 安装步骤详解
    解决未能从程序集xxx中加载类型System.ServiceModel.Activation.HttpModule的问题
    将博客搬至CSDN
    PMS-授权中心
    如何从现有版本1.4.8升级到element UI2.0.11
    Maven私有仓库: 发布release版本报错:Return code is: 400, ReasonPhrase: Repository does not allow upd ating assets: maven-releases.
    spring boot + dubbo开发遇到过的异常
    java,javascript中的url编码
    SpringBoot favicon.ico
  • 原文地址:https://www.cnblogs.com/pigtail/p/3396505.html
Copyright © 2011-2022 走看看