一个鼠标滑轮监听插件MWheel

JavaScript 2013-10-11 滑轮,滚轮,事件监听,MWheel

项目中正好用到了鼠标滑轮监听事件,于是干脆把它整理成一个方便的JavaScript插件以便于日后有用,给感兴趣的同学研究研究,如果有好的意见记得Email to mail@lizhong.me。

插件源码不到100行,下载地址 MWheel.js

源码:

(function(window, undefined){

	var list = ["up","down"], _this;

	var handle = function(event) {  
		var delta = 0, e;  

		e = event || window.event;  

		if (e.preventDefault){
			e.preventDefault();  
		}

		e.returnValue = false;

		if (e.wheelDelta){
			delta = e.wheelDelta / 120;  
		}else if(e.detail){  
			delta = -e.detail / 3;  
		}

		if(delta){
			if (delta < 0){
				if(typeof _this[list[0]] === "function"){
					_this[list[0]].apply(_this, [e]);
				}
			}else{
				if(typeof _this[list[1]] === "function"){
					_this[list[1]].apply(_this, [e]);
				}
			}  			
		}

	};

	var MWheel = function(element){
		if(element){
			return new MWheel.fn.init(element);
		}else{
			return null;
		}
	};

	MWheel.fn = MWheel.prototype = {
		constructor : MWheel,
		init : function(element) {
			var i;
			
			_this = this;
			_this.element = element;
			
			for(i=0; i<list.length; i++){
				_this[list[i]] = null;	
			}

			_this.element.addEventListener("DOMMouseScroll", handle, false);  
			_this.element.onmousewheel = handle;
			//a.addEventListener("mousewheel", handle, false);

		}
	};

	MWheel.fn.init.prototype = MWheel.fn;

	(function(){
	
		MWheel.fn.addEventListener = function(action, fn){
			var i;
			for(i=0; i<list.length; i++){
				if(action === list[i]){
					_this[list[i]] = fn;	
				}		
			}

			return _this;
		};
		
		
	
	})();

	(function(){
		MWheel.fn.removeEventListener = function(){
			_this.element.removeEventListener("DOMMouseScroll", handle);
			_this.element.onmousewheel = null;		
		};
	})();

	window.MWheel = MWheel;

})(window);

使用方法

一、普通使用

// 获取要监听滑轮事件的节点
var element = document.getElementById("element");

// 创建一个实例
var M = MWheel(element);

// 添加鼠标滑轮下划处理函数
M.addEventListener("down", function(event){
    this.element.innerHTML = "鼠标滑轮下滑。。。";
});

// 添加鼠标滑轮上划处理函数
M.addEventListener("up", function(num){
    this.element.innerHTML = "鼠标滑轮上滑。。。";
});

// 移除节点的鼠标滑轮监听事件
M.removeEventListener();

二、链式操作

var element = document.getElementById("element");

MWheel(element).addEventListener("down", function(event){
	this.element.innerHTML = "鼠标滑轮下滑。。。";
}).addEventListener("up", function(event){
	this.element.innerHTML = "鼠标滑轮上滑。。。";
});

三、可以在处理函数中移除事件监听

var element = document.getElementById("element");

var M = MWheel(element);

// 添加处理函数链式操作
M.addEventListener("down", function(event){

	this.element.innerHTML = "鼠标滑轮下划";

	// 移除监听
	this.removeEventListener();
}).addEventListener("up", function(event){

	this.element.innerHTML = "鼠标滑轮上划";

	// 移除监听
	this.removeEventListener();
});

补充

在addEventListener函数中绑定的方法有个this对象,想法1,this指向实例本身,这样有个方便就是直接在方法里就能通过this解除监听。想法2,this指向被监听的节点,这样就与系统处理一样,但移除监听事件就不太方便。目前采用的是想法1,this指向是列本身。

我写了一个简单的demo页 http://www.qttc.net/static/demo/MWheel/

文字链接:《一个鼠标滑轮监听插件MWheel

文章地址:http://www.qttc.net/201310376.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 1

  • 用这个做视差滚动和一些效果很不错
    2013-10-13 10:02:58 [ 跟帖 ]
    1 #