JS—鼠标滚轮

作者: Miss____Du | 来源:发表于2014-12-26 16:40 被阅读254次

自从12月20日考完六级(丢人),又和闺蜜过了两天圣诞,中间还投了几份简历,学了学jquery权威指南,期望年前可以在北京找到一份工作。
今天周五啦,知道今天写的笔记,周六日肯定又会沉啦。
没关系,笔记是写给自己看的,毛病是让他人挑的,好几次我看到自己的笔记里有错别字,大家都不出来指正,考虑要不要换个地方写,可是都积累这么多笔记换个地方,还得转移阵地,怪麻烦的,继续写吧!


  • 鼠标滚轮事件,最早是IE6实现的,后来Opera、Chrome、Safari也都实现了这个事件。但是在opera9.5之前的版本与通用事件有些设置有出入。Firefox支持的滚轮事件与通用事件的名字及属性的设置也不一样。
    所以、要给出一个跨浏览器的解决方案。
  • 方案
  • 我们希望浏览器可以都这么实现
    事件名称:mousewheel
    滚轮信息:event.wheelDelta;
    EventUtil.addHandler(document,"mousewheel",function(event){
    event=EventUtil.getEvent(event);
    alert(event.wheelDelta);//上滑120,下滑-120
    });
  • opera早期版本正负号颠倒,所以需要这样
    wheelDelta值的正负号是颠倒的,需要在代码中,判断浏览器版本,来做相应的处理。
    书上是这样写的,但是由于我还没有仔细学习浏览器对象,所以对浏览器版本的区分还是不大熟悉。也没找出测试不通过的理由。
    EventUtil.addHandler(document,"mousewheel",function(event){
    event=EventUtil.getEvent(event);
    var delta=(client.engine.opera && client.engine.opera<9.5 ? -event.wheelDelta:event.wheelDelta);
    alert(delta);
    });
  • Firefox
    他支持的鼠标滚轮事件名字是DOMMouseScrool;事件信息是:event.detail
    EventUtil.addHandler(document,"DOMMouseScroll",function(event){
    event=EventUtil.getEvent(event);
    alert(event.detail);//上滑-3,下滑3
    });
  • 跨浏览器的综合解决方案
  • 继续为EventUtil添加方法
    getWheelDelta:function(event){
    if(event.wheelData){
    return (client.engine.opera && client.engine.opera<9.5 ? -event.wheelDelta:event.wheelDelta);
    }else{
    return -event.detail*40;
    }
    }
  • 调用
    function handler(event){
    event=EventUtil.getEvent(event);
    var delta=EventUtil.getWheelDelta(event);
    alert(delta)
    }
    EventUtil.addHandler(document,"mousewheel",handler);
    EventUtil.add(document,"DOMMouseScroll",handler);
    这是书上给的解决方案,但是我在测试时,为了兼容欧朋早期版本所写的代码,依旧不起效果,等我仔细学了浏览器对象,再想办法解决,现在欧朋的版本已经到26+,所以也可以忽略这一兼容问题。
  • 这个事件是冒泡事件除了IE8会冒泡到document,其他浏览器都会冒泡到window

相关文章

  • 二十二、jquery之——滚轮事件、正则

    滚轮事件与函数节流 jquery.mousewheel插件使用jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮...

  • 滚轮事件和函数节点流,本地存储,jQueryUI

    滚轮事件与函数节流 jquery.mousewheel插件使用jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮...

  • 滚轮事件与函数节流、ajax与jsonp

    滚轮事件与函数节流 jquery.mousewheel插件使用jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮...

  • jquery之——滚轮事件、正则

    滚轮事件与函数节流jquery.mousewheel插件使用jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 17_day 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 前端的整屏滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

  • 整屏幕滚动

    整屏滚动: jquery.mousewheel插件使用 : jquery中没有鼠标滚轮事件,原生js中的鼠标滚轮事...

网友评论

  • 3a909c362736:很厉害,我是查event.wheelData,找到你的 :joy:
    我是刚学php的小白,现在刚开始学JS :+1:
  • a95d0cbc5c77:很厉害啦 我还是前端小白那。。。。佩服佩服
  • Miss____Du:@yuanoook_com 我还在找工作呢, :cold_sweat: 不用担心
  • cf84f269c96b:确定你是妹子?妹子都这么厉害,前端程序猿恐怕都要失业了 :clap:

本文标题:JS—鼠标滚轮

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