• 新希望!中超19岁新星半年增重十斤 曾戏耍恒大两国脚 2018-10-17
  • 迎丰收 晒丰收 庆丰收 2018-10-15
  • “捂脸表情”被注册成商标?申请人不认为商标侵权 2018-10-15
  • 战巡南海、绕岛巡航…空军有“飞出去”的主心骨 2018-10-14
  • 幼儿园要求家长写一万字读后感:不能这样玩家长|幼儿园|家长-教育时讯 2018-10-13
  • 中国故宫文物展在希腊举行 2018-10-13
  • 車·晓 第26期 車企官方降价真相幾何? 2018-10-12
  • 宝沃总裁杨嵩:曾和奔驰宝马同水平 已不能同日而语 2018-10-11
  • 新时代党员干部要有更大的担当和作为 2018-10-10
  • “2018-雷霆”专项行动破获百余起台湾间谍案 2018-10-09
  • 朝韩首脑今起在平壤会晤 “金文会”将聚焦三大议题 2018-10-09
  • 2018顺义啤酒节--北京频道--人民网 2018-10-08
  • 台湾遭遇的“断交潮”有无化解之道? 2018-10-08
  • 习近平会见爱沙尼亚总统卡柳莱德 2018-10-08
  • 中国空间站研制建设正有序开展 坚持和平利用 2018-10-07
  • JS如何判断鼠标向上还是向下滚动

    栏目: 编程语言 发布于: 2014-05-08 20:00:22

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的。今天简单的研究了一下如何使用javascript来判断鼠标是向上滚动还是向下滚动,简要分享。

    首先,不得不说一下,因为不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件,所以在这个过程中需要添加事件监听,代码如下:兼容firefox采用addEventListener监听。

    /*注册事件*/
    if(document.addEventListener){
    	document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }//W3C
    window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

    另外判断滚轮向上或向下滚动在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox 使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义却是一致的,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
     
    具体的示例代码如下所示:

    <label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta"/>
    <label for="detail">滚动值:(Firefox)</label><input type="text" id="detail"/>
    <script type="text/javascript">
    var scrollFunc=function(e){
        e=e || window.event;
        var t1=document.getElementById("wheelDelta");
        var t2=document.getElementById("detail");
        if(e.wheelDelta){//IE/Opera/Chrome
            t1.value=e.wheelDelta;
        }else if(e.detail){//Firefox
            t2.value=e.detail;
        }
    }
    /*注册事件*/
    if(document.addEventListener){
        document.addEventListener('DOMMouseScroll',scrollFunc,false);
    }//W3C
    window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
    </script>

    通过运行上述代码我们可以得出以下结果:

    在非firefox浏览器中,滚轮向上滚动返回的数值是120,向下滚动返回-120
     
    而在firefox浏览器中,滚轮向上滚动返回的数值是-3,向下滚动返回3
     
    代码部分如下,e.wheelDelta是判断是否为非firefox浏览器,e.detail为firefox浏览器

    if(e.wheelDelta){//IE/Opera/Chrome
    	t1.value=e.wheelDelta;
    }else if(e.detail){//Firefox
    	t2.value=e.detail;
    }

    您可能感兴趣的文章

    • js如何判断鼠标滚轮是向下还是向上滚动
    • javascript判断鼠标左右键点击-兼容ie、firefox、chrome等各大主流浏览器
    • php判断字符串是否全英文,纯中文,中英文组合的方法
    • 你是想创业,还是想当自成一格的SOHO族?
    • js限制只能输入英文字母和数字,不能输入中文和其他特殊字符的办法
    • js判断一个值是否存在于一个js数组中
    • jQuery判断某个元素是否存在
    • JS中判断对象是否为空
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:JS如何判断鼠标向上还是向下滚动
    IT技术书籍推荐:
    细说PHP(第2版)
    细说PHP(第2版)
    高洛峰 (作者)
    《细说PHP(第2版)》内容简介:PHP是开发Web应用系统最理想的工具,易于使用、功能强大、成本低廉、高安全性、开发速度快且执行灵活。全书以实用为目标设计,包含PHP开发最主流的各项技术,对每一个知识点都进行了深入详细的讲解,并附有大量的实例代码,图文并茂。系统地介绍了PHP的相关技术及其在实际Web开发中的应用。 《细说PHP(第2版)》共六个部分,分为30个章节,每一章都是PHP独立知识点的总结。内容涵盖了动态网站开发的前台技术(HTML+CSS)、PHP编程语言的语法、PHP的常用功能??楹褪涤眉记?、MySQL数据库的设计与应用、PHP 面向对象的程序设计思想、数据库抽象层PDO、Smarty模板技术、Web开发的设计模式、自定义框架BroPHP、Web项目开发整个流程等目前PHP开发中最主流的技术。每一章中都有大量的实用示例,以及详尽的注释,加速读者的理解和学习,也为每章的技术点设置了大量的自测试题。最后以一个比较完整的、采用面向对象思想,以及通过MVC模式设计,并结合Smarty模板,基于BroPHP框架的CMS系统为案例,详细介绍了Web系统开发从设计到部署的各个细节,便于更好地进行开发实践。