JavaScript中的鼠标滚轮事件详解
/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)
if(document.addEventListener){
  document.addEventListener('DOMMouseScroll',scrollFunc,false);
}

Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件 ~~~otherBrowser: window.onmousewheel = handler;
window.onmousewheel=document.onmousewheel=scrollFunc;  //IE/Opera/Chrome

其中除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式

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

2. detail(firefox)与wheelDelta(otherBrowser)

判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,firefox:detail只取±3,otherBrowser: wheelDelta只取±120,其中正数表示为向上,负数表示向下。

<p><label for="wheelDelta">滚动值:</label>(IE/Opera)<input type="text" id="wheelDelta" /></p>
<p><label for="detail">滚动值:(Firefox)</label><input type="text" id="detail" /></p>
<script type="text/javascript">
var oTxt=document.getElementById("txt");
/***********************
* 函数:判断滚轮滚动方向
* 作者:walkingp
* 参数:event
* 返回:滚轮方向 1:向上 -1:向下
*************************/
var scrollFunc=function(e){
var direct=0;
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;
}
ScrollText(direct);
} // scrollFunc end

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

JavaScript中的鼠标滚轮事件详解的更多相关文章

  1. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  2. JS鼠标滚轮事件详解

    鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...

  3. js中的鼠标滚轮事件

    ## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...

  4. JavaScript中typeof和instanceof深入详解

    这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方. typeof 先来说说typeof吧.首先需要注意的是,typeof方法返回一个字 ...

  5. JavaScript 中 apply 、call 的详解

    apply 和 call 的区别 ECMAScript 规范给所有函数都定义了 call 与 apply 两个方法,它们的应用非常广泛,它们的作用也是一模一样,只是传参的形式有区别而已. 原文作者:林 ...

  6. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  7. JavaScript中var关键字的使用详解

    作用 声明作用:如声明个变量. 语法 ? 1 var c = 1; 省略var 在javascript中,若省略var关键字而直接赋值,那么这个变量为全局变量,哪怕是在function里定义的. ? ...

  8. Javascript中的this关键字用法详解

    在javascript里面,this是一个特殊的对象,它不像其他编程语言那样,是存储在实例中的值,直接指向此实例. 而是作为一个单独的指针,在不同的情况之下,指向不同的位置,这也是为什么我们会将它搞混 ...

  9. javascript中6种基本数据类型详解

    javascript中有5中数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String,还有一种复杂数据类型——object,object本质是由一组键值 ...

随机推荐

  1. SQL学习之数据列去空格函数

    1.LTRIM()---去掉列值左边的空格  如下代码: select * from dbo.course where tno='t003' and cno='c0013'

  2. EF简介

    EF:EF是 asp.net的一套ORM框架. ORM: 广义上:ORM指的是面向对象的模型和关系型数据库的数据库之间的相互转换; 狭义上:ORM可以被认为是,基于关系型数据库的数据存储,实现一个虚拟 ...

  3. tigervnc*

    yum install -y tigervnc* tigervnc-server vncserver www.webmin.cn http://blog.sina.com.cn/s/blog_4ba5 ...

  4. 2014.9.15HTML

    <html> <title> </title> ——页面标题 <head> </head> ——网页上的控制信息 <body> ...

  5. 匹配图片src正则

    preg_match_all('#<img.*?src="([^"]*)"[^>]*>#i', $xstr, $match); /** * 获取图片sr ...

  6. 使用mobile jQuery 动态给select下拉添加数据,选中项默认不显示的解决方法。

    getaddress(); function getaddress(type=0,parent='') { var tid=1; $.ajax({ type: "post", ur ...

  7. 用rsync从Linux到Windows远程备份

    论 rsync是Linux系统下的数据镜像备份工具,从软件的命名上就可以看出来 了——remote sync.rsync支持大多数的类Unix系统,无论是Linux.Solaris还是BSD上都经过了 ...

  8. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  9. ONFI闪存数据通道接口标准

    早期的闪存产品每个厂家的设计标准各有不同,会碰到各种各样的问题,特别是到了06年之后,闪存产业市场需求开始发力,造成了迫切需要一个统一的标准来改变这个问题. 2007年1月,以英特尔,镁光,海力士,意 ...

  10. 解决magento保存产品时耗时很长的问题

    以前我在更新产品属性值(拿price为例)的时候,通常会这样做: foreach($product_ids as $id){ $product = Mage::getModel('catalog/pr ...