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>
  • 相关阅读:
    CSS定位DIV绝对底部
    Android平台语音交友软件源码开发,语音通话的实现
    小视频app源码审核机制优化,直播间的优化重点
    为什么一对一直播系统源码功耗高,这些原因你了解吗?
    短视频app源码多元化发展,加深与电商的渊源
    【日本語新聞選読】第7回:4月14日
    JSP属性的四种保存范围(page request session application)
    CDC之fast->slow (1)
    openMSP430之openmsp430-loader
    最简单的DWR例子
  • 原文地址:https://www.cnblogs.com/pigtail/p/3396505.html
Copyright © 2011-2022 走看看