浅谈 Mousewheel 事件

其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScroll” (事件和事件属性的测试案例)。

Mousewheel Event in JavaScript

body {
padding:5px 10px;
}
.box {
width:300px;
height:150px;
padding:10px;
border:1px solid #999;
background:#999;
margin-bottom:20px;
}
.result strong {
color:#f00;
}

Mousewheel Event in JavaScript

  1. IE6, IE7, IE8, Opera 10+, Safari 5+ support mousewheel.
  2. Firefox 3.5+ support DOMMouseScroll.
  3. IE6, IE7, IE8, Opera 10+, Safari 5+ support event.wheelDelta.
  4. Firefox 3.5+, Opera 10+ support event.detail.
  5. The event.wheelDelta value is a multiple of 120.
  6. The event.detail value is a multiple of 3.

Mousewheel Event: mousewheel

Mousewheel Event: DOMMouseScroll

Related Articles: http://www.planabc.net/2010/08/12/mousewheel_event_in_javascript/

(function(){
var addEvent = (function(){
if (window.addEventListener) {
return function(el, sType, fn, capture) {
el.addEventListener(sType, fn, (capture));
};
} else if (window.attachEvent) {
return function(el, sType, fn, capture) {
el.attachEvent("on" + sType, fn);
};
} else {
return function(){};
}
})(),
elBox01 = document.getElementById('J_Box01'),
elBox02 = document.getElementById('J_Box02'),
elResult = document.getElementById('J_Result');

// IE6/IE7/IE8/Opera 10+/Safari5+
addEvent(elBox01, 'mousewheel', function(event){
event = window.event || event ;
elResult.innerHTML = 'This browser support mousewheel event!
event.wheelDelt: ' + (event.wheelDelta ? event.wheelDelta : '0') + '
event.detail: ' + (event.detail ? event.detail : '0') + '';
}, false);
// Firefox 3.5+
addEvent(elBox02, 'DOMMouseScroll', function(event){
event = window.event || event ;
elResult.innerHTML = 'This browser support DOMMouseScroll event!
event.wheelDelt: ' + (event.wheelDelta ? event.wheelDelta : '0') + '
event.detail: ' + (event.detail ? event.detail : '0') + '';
}, false);
})();

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

OK,我们现在已经知道了不同浏览器之间实现的差别,兼容代码如下:


代码如下:

var addEvent = (function(){
if (window.addEventListener) {
return function(el, sType, fn, capture) {
el.addEventListener(sType, fn, (capture));
};
} else if (window.attachEvent) {
return function(el, sType, fn, capture) {
el.attachEvent("on" + sType, fn);
};
} else {
return function(){};
}
})(),
// isFirefox 是伪代码,大家可以自行实现
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// object 也是伪代码,你需要注册 Mousewheel 事件的元素
addEvent(object, mousewheel, function(event){
event = window.event || event;
// todo something
}, false);

我们再回到要实现的交互效果上,现在还有其他一些问题需要来解决:
1. 页面字体到底是放大还是缩小呢? ==> 鼠标滚轮是向上滚动还是向下滚动呢?
2. 页面字体缩放的倍数到底是多少呢? ==> 鼠标滚轮滚动的幅度大小是多少呢?
还好,我们可以通过 event 的某些属性值得到这些信息:
1. “mousewheel” 事件中的 “event.wheelDelta” 属性值:返回的值,如果是正值说明滚轮是向上滚动,如果是负值说明滚轮是向下滚动;返回的值,均为 120 的倍数,即:幅度大小 = 返回的值 / 120。
2. “DOMMouseScroll” 事件中的 “event.detail” 属性值:返回的值,如果是负值说明滚轮是向上滚动(与 “event.wheelDelta” 正好相反),如果是正值说明滚轮是向下滚动;返回的值,均为 3 的倍数,即:幅度大小 = 返回的值 / 3。
3. “mousewheel” 事件在 Opera 10+ 中却是个特例,既有 “event.wheelDelta” 属性,也有 “event.detail” 属性。
注:上面第三点,在《The onmousewheel event of JavaScript》一文中有这样一段批注:


代码如下:

In Opera, “detail” returns the same value as it does in FF, so for the big O you should rely on “detail” instead of “wheelDelta”, which depending on the Opera version may return a different value than in IE's.

但经测试, Opera 9+ 和 Opera 10+ 中的 event.wheelDelta 属性与其他浏览器中的表现完全一致,未发现异常与错误,从接口角度来说,代码中应优先使用 “event.wheelDelta” 属性。
此时代码如下:


代码如下:

var addEvent = (function(){
if (window.addEventListener) {
return function(el, sType, fn, capture) {
el.addEventListener(sType, fn, (capture));
};
} else if (window.attachEvent) {
return function(el, sType, fn, capture) {
el.attachEvent("on" + sType, fn);
};
} else {
return function(){};
}
})(),
stopEvent: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
zoomIn = function(){},
zoomOut = function(){},
// isFirefox 是伪代码,大家可以自行实现
mousewheel = isFirefox ? "DOMMouseScroll" : "mousewheel";
// object 是伪代码,你需要注册 Mousewheel 事件的元素
addEvent(object, mousewheel, function(event){
var delta = 0;
event = window.event || event;
stopEvent(event);
delta = event.wheelDelta ? (event.wheelDelta / 120) : (- event.detail / 3);
// zoomIn, zoomOut 是伪代码,需要实现的缩放事件
delta > 0 ? zoomIn(delta): zoomOut(Math.abs(delta));
} , false);

(0)

相关推荐

  • Jquery增加鼠标中间功能mousewheel的实例代码

    复制代码 代码如下: (function ($) {    var types = ['DOMMouseScroll', 'mousewheel'];    $.event.special.mousewheel = {        setup: function () {            if (this.addEventListener) {                for (var i = types.length; i;) {                    this.

  • 比较方便的onMouseWheel缩放图片效果 原创

    复制代码 代码如下: <HTML>   <HEAD>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   <TITLE>onMouseWheel缩放图片效果-www.jb51.Net</TITLE> <body> <script> function bbimg(o) {   var zoom

  • JS滚轮事件onmousewheel使用介绍

    典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件.在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 "mousewheel" 事件.滚轮事件的兼容性差异有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派,杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:"DO

  • jquery.mousewheel实现整屏翻屏效果

    实现整屏上下翻效果: 需加载的js <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.mousewheel.js"></script> css样式如下: body{padding:0;margin:0

  • 浅谈 Mousewheel 事件

    其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:"DOMMouseScroll" (事件和事件属性的测试案例). Mousewheel Event in JavaScript body { padding:5px 10px; } .box { width:300

  • 浅谈JavaScript事件绑定的常用方法及其优缺点分析

    传统方式  element.onclick = function(e){ // ... };  1.  传统绑定的优点 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致 处理事件时,this关键字引用的是当前元素,这很有帮组 2. 传统绑定的缺点 传统方法只会在事件冒泡中运行,而非捕获和冒泡 一个元素一次只能绑定一个事件处理函数.新绑定的事件处理函数会覆盖旧的事件处理函数 事件对象参数(e)仅非IE浏览器可用 W3C方式  element.addEventListener('click'

  • 浅谈javascript事件环微任务和宏任务队列原理

    JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事先预定好的函数,事情发生的时候 JS 会将相应的函数入栈执行然后出栈,但是关于事件环我们还有一些未知的东西,例如,setTimeout 我们习惯称他为定时器,但是可能很多人没有意识到,这个东西和我们常用的一些事件没什么不同,只不过我们通常所说的事件大多需要用户触发,而 setTimeout 不用用户自己触发,而是指定时间之后触发:那么问题来了,如果我们将时间设置为 0 会发生什么?会立即执

  • 浅谈jQuery事件绑定原理

    jq里面有一个data的方法,给dom元素绑定相关的数据的.当给dom用jq的方法绑定了事件,会生成对应的时间列表 可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource()) 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

  • 浅谈Javascript事件对象

    如果是事件处理函数绑定的函数,浏览器会默认传递一个参数,而这个参数就是事件对象. document.onclick = function() { alert(arguments.length); //1 } 因为arguments[0]这样使用这个参数比较麻烦,所以我们可以传递一个参数evt来进行使用. document.onmouseup = function(evt) { var e = evt || window.event; alert(e.button); //0为鼠标左键,1为滚轮,

  • 浅谈Javascript事件模拟

    这就意味着会有适当的事件冒泡,并且浏览器会执行分配的事件处理程序.这种能力在测试web应用程序的时候,是非常有用的,在DOM 3级规范中提供了方法来模拟特定的事件,IE9 chrome FF Opera 和 Safari都支持这样的方式,在IE8及以前的办法的IE浏览器有他自己的方式来模拟事件 a)Dom 事件模拟 可以通过document上的createEvent()方法,在任何时候创建事件对象,此方法只接受一个参数,既要创建事件对象的事件字符串,在DOM2 级规范上所有的字符串都是复数形式,

  • 浅谈JavaScript事件的属性列表

    HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript.下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为. 属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事件句柄. ondblclick 当用户双击某个对象时调用的事件句柄. onerror 在加载文档或图像时发生错误.

  • 浅谈Javascript事件处理程序的几种方式

    事件就是用户或浏览器自身执行的某种动作.比如说click,mouseover,都是事件的名字.而相应某个事件的函数就叫事件处理程序(或事件侦听器).为事件指定处理程序的方式有好几种. 一:HTML事件处理程序. 如: 复制代码 代码如下: <script type="text/javascript"> function show(){ alert('hello world!'); } </script> <input type="button&q

  • 浅谈javascript事件取消和阻止冒泡

    取消默认操作 w3c的方法是e.preventDefault(),IE则是使用e.returnValue = false; 在支持addEventListener()的浏览器中,也能通过调用时间对象的preventDefault()方法取消时间的默认操作.不过,在IE9之前的IE中,可以通过设置事件对象的returnValue属性为false来达到同样的效果.下面的代码假设一个事件处理程序,它使用全部的三种取消技术: function cancelHandler(event){ var even

  • 浅谈Spring-boot事件监听

    springboot的事件监听:为bean之间的消息通信提供支持.当一个bean做完一件事以后,通知另一个bean知晓并做出相应处理.这时,我们需要另一个bean,监听当前bean所发生的事件. 实现步骤:四个步骤,四种方式 第一种方式 1.自定义事件,一般是继承ApplicationEvent抽象类 2.定义事件监听器,一般是实现ApplicationListener接口 3.1)把监听器加入到SpringApplication中:ApplicationListener.addListener

随机推荐