js中鼠标滚轮事件详解
作者:walkingp 来源:walkingp博客 发布时间:2010-02-05 12:20:00
(以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ )
之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题
附加事件
其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件。
/*IE注册事件*/if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);}
Firefox使用addEventListener添加滚轮事件
/*Firefox注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
其中除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
detail与wheelDelta
判断滚轮向上或向下在浏览器中也要考虑兼容性,现在五大浏览器(IE、Opera、Safari、Firefox、Chrome)中Firefox使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,detail只取±3,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);
}
/*注册事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
</script>
Chrome
Firefox
IE(8)
IE(6)
Opera
Safari
猜你喜欢
- 微软建议用Request.BinaryRead()读取表单数据,但由于这种方法读出的是二进制数据,需要对读出的数据逐字节进行分析,生成有意义
- 此前piscdong已经做过一次评测了,这次的Beta正式推出,我也来参与一下.当回小白鼠吧.新的界面设计非常让人兴奋750){this.r
- 概述 -------------------------------------------------------------------
- 我的原数据库是3.23版本的.前几天因为一个论坛转移.必须用5.1的.于是就是升级了数据库.论坛是正常的.可以是原来的一个老库因为是3.23
- ①.页面文件使用正确的编码,gb2312使用ANSI,utf-8使用utf-8; ②.ASP代码中设置正确的CODEPAGE,gb2312使
- 本来在网上有不少关于这方面的文章,可是我找了好久也没看到把(可能我的搜索水平有线把)不过倒是聊天室的很多。如何统计会员再线状态,希望对刚开始
- 随着网站访问量的加大,每次从数据库读取都是以效率作为代价的,很多用ACCESS作数据库的更会深有体会,静态页加在搜索时,也会被优先考虑。互联
- 这个收藏本站、设为首页代码相信每个网站都会用到,这么常用的代码,网络上流行的一般是很多年前的代码版本,只有兼容IE,对其它浏览器没有考虑,下
- 在本机运行含有JavaScript代码的网页时(比如Google AD代码),IE浏览器会产生一个警告。这个“警告”确实很烦人,开始时还会误
- 使用jmail组件发送邮件:Function JMail(Send_From,Send_To,Send_Subject,Send_
- 分区视图联接来自一组成员的水平分区数据,使数据看起来象来自同一张表。SQL Server 2000 区分本地分区视图和分布式分区视图。在本地
- 问一下谁知道如何用 javascript 获取硬盘信息1.获得硬盘当前有几个盘符.2.每个盘符的 大小,已经使用的大小,和没有使用的大小原理
- asp编程手工定义参数的方法: Dim con As ADODB.Connection
- 这段后门代码可以隐藏在asp文件中,大家可以搜索一些特点的关键字,查看文件的修改日期,看看是不是有如下的代码。<%if re
- 以下为引用的内容:DROP PROCEDURE test_insert ;DELIMITER ;;CREATE PROCEDURE test
- 今天呱呱发了一个网址给我看,大概效果就是类似幻灯片的效果。当时我的第一反映这个是不是用锚点做的啊呢,以前在网上看过用锚点做的这类的效果。脑袋
- * 前,我在公司做设计,当时就已经做到技术总监,Photoshop是自学的,当时觉得全世界比我Photoshop强的人也不在多数。七年前,
- class和id的命名,如果合理,可以使得文档具有清晰的结构我们现在解决办法就是使用现有的元素,通过给他们id或class而得到额外的信息。
- 在JAVASCRIPT中LEFT函数的等价函数:function left(mainStr,lngLen) {if&nb
- 在ASP中,如何创建DSN? 见下:<HTML><HEAD><META&n