JavaScript鼠标中键滚动事件

快乐打工仔 分类:实例代码

JavaScript鼠标中键滚动事件属于前端实例代码,有关更多实例代码大家可以查看

在实际应用中,鼠标的一些事件非常常用,例如,onclick事件、onmouseover事件等,这里就不介绍了,具体可以参阅javascript click事件和javascript mouseover事件一章节。 还有一种事件比较少用,那就是鼠标中键滚轮滚动事件,下面就通过代码实例简单介绍一下中键滚轮事件。

IE浏览器和谷歌浏览器支持mousewheel事件,也就是鼠标中键滚动事件,但是遗憾的是火狐浏览器并不支持此事件,而是支持DOMMouseScroll事件,下面就这两个做一下简单的分析对别:

一.mousewheel事件:

event.wheelDelta返回值是120的倍数,如果属性值为正数则是向上滚动,如果是负数则是向下滚动。

滚动幅度的大小等于event.wheelDelta/120。

二.DOMMouseScroll事件:

event.detail返回值都是3的倍数,和event.wheelDelta相反,如果属性值为负数,则是向上滚动,如果是正数则是向下滚动。

特别注意:

DOMMouseScroll不支持前面加"on"事件注册方式,例如obj.onclick=funcion(){}。

下面对上面做一下兼容性处理,以达到在任何浏览器中都可以顺利运行。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title> 
<style type="text/css">
#thediv{
  width:100px;
  height:100px;
  background-color:red
}
</style>
<script type="text/javascript"> 
var addEvent=(function(){        
  var _eventCompat=function(event){
    var type=event.type;
    if(type=='DOMMouseScroll'||type=='mousewheel'){
      event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3;
    }
    
    if(event.srcElement&&!event.target){
      event.target=event.srcElement;    
    }
    
    if(!event.preventDefault&&event.returnValue!==undefined){
      event.preventDefault=function(){
        event.returnValue=false;
      };
    }
    return event;
  };
 
  if(window.addEventListener){
    return function(el, type, fn, capture){
      if(type==="mousewheel"&&document.mozHidden!==undefined){
        type="DOMMouseScroll";
      }
      el.addEventListener(type,function(event){
        fn.call(this, _eventCompat(event));
      },capture||false);
    }
  } 
  else if(window.attachEvent){
    return function(el, type, fn, capture){
      el.attachEvent("on" + type, function(event){
        event = event || window.event;
        fn.call(el, _eventCompat(event));    
      });
    }
  }
  return function(){};    
})(); 
window.onload=function(){
  var height=100;
  var width=100;
  var thediv=document.getElementById("thediv");
  function size(event){
    width=width+event.delta;
    height=height+event.delta;
    thediv.style.width=width+"px";
    thediv.style.height=height+"px";
  }
  addEvent(thediv,"mousewheel",size,false);
}     
</script> 
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

当鼠标放在div中时候,滚动鼠标中键能够缩放div的大小,下面介绍一下实现过程:

一.实现原理:

代码看上去稍显复杂,其实特别的简单,就是根据在不同浏览器中,相关事件的特点,进行了一些兼容性处理,这是必然的操作,这里就不多介绍了,大家直接看代码注释可以了解相关细节。

二.代码注释:

1.var addEvent=(function(){})(),声明一个变量,它的值就是匿名函数的返回值,这个返回值就是一个函数对象。

2.var _eventCompat=function(event){})(),声明一个变量,它的值是一个匿名函数,此匿名函数能够封装一个事件对象,对时间对象的属性做一些兼容性处理,此函数的参数就是事件对象。

3.var type=event.type,将事件类型类型赋值给变量type。

4.if(type=='DOMMouseScroll'||type=='mousewheel'),如果事件类型是'DOMMouseScroll'或者'mousewheel'。

5.event.delta=(event.wheelDelta)?event.wheelDelta/120:-(event.detail||0)/3,delta是一个事件对象的自定义属性,如果支持event.wheelDelta属性(谷歌和IE浏览器)则使用event.wheelDelta/120,这会得到滚动的幅度,event.wheelDelta的返回值都是120的倍数,如果在火狐浏览器下,则使用(event.detail||0)/3,event.detail的返回值是3的倍数。

6.if(event.srcElement&&!event.target) ,如果事件对象支持srcElement属性且不支持target属性,这说明是IE8和IE8以下浏览器。

7.event.target=event.srcElement,将target属性值修改为event.srcElement。

8.if(window.addEventListener) ,如果支持addEventListener函数,也就是谷歌、火狐或者IE8以上浏览器。

9.return function(el, type, fn, capture){},返回一个函数对象,此函数具有四个参数,第一个参数是要注册事件处理函数的对象,第二个是事件类型,第三个是事件处理函数,第四个是一个布尔值,用来说明是捕获类型还是冒泡类型。

10.if(type==="mousewheel"&&document.mozHidden!==undefined){type="DOMMouseScroll"} 如果是火狐浏览器,则将type值设置为DOMMouseScroll。document.mozHidden在火狐浏览器中是个布尔值,在谷歌和IE浏览器中返回值是undefined。

11.el.addEventListener(type,function(ev){},capture||false)注册事件处理函数。

12.fn.call(this, _eventCompat(ev));,将函数fn的调用对象设置为el,参数为一个封装好的事件对象,参数ev是原始的事件对象。

相关阅读:

(1).target属性参阅javascript event.target一章节。 

(2).preventDefault参阅javascript preventDefault()一章节。 

(3).addEventListener参阅addEventListener()和attachEvent()函数的用法一章节。

JavaScript鼠标中键滚动事件,这样的场景在实际项目中还是用的比较多的,关于JavaScript鼠标中键滚动事件就介绍到这了。

回复

我来回复
  • 暂无回复内容