兼容firefox的鼠标滚轮事件

function addMouseWheel(obj,fn,preventDefault){
	//添加绑定
	if(window.navigator.userAgent.toLowerCase().indexOf("firefox") != -1){
		obj.addEventListener("DOMMouseScroll",fnWheel,false);
	} else {
		obj.onmousewheel = fnWheel;
	}

	function fnWheel(ev){
		var oEvent = ev || event;
		var bDown = true;//下
		if(oEvent.wheelDelta){//ie chrome
			console.log(oEvent.wheelDelta)
			bDown = oEvent.wheelDelta > 0 ? false:true;
		} else {//ff
			console.log(oEvent.detail)
			bDown = oEvent.detail > 0 ? true:false;
		}
		(typeof fn == "function") && fn(bDown);
		if(preventDefault){
			oEvent.preventDefault && oEvent.preventDefault();
			return false;
		}
	}
}

  

时间: 2024-10-11 09:00:32

兼容firefox的鼠标滚轮事件的相关文章

【学】鼠标滚轮事件兼容写法

鼠标滚轮的写法要注意以下几个知识点: ie,chrome下有onmousewheel事件,而ff是DOMMouseScroll事件,而且只能通过addEventListener来添加,而同时为了兼顾ie9下面所以在事件添加的时候就要做判断 为了判断是向上还是向下滚动,ie和chrome下是通过event事件对象的wheelDelta属性来判断,而ff下是event的detail值判断,但由于向上和向下滚动对应的正负关系,wheelDelta和detail正好是相反的,那可以直接通过正负值来判断滚

鼠标滚轮事件---兼容

鼠标滚轮事件绑定及滚轮方向兼容demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #test{ width: 200px; height: 200px; background: pink

鼠标滚轮事件的监听

鼠标滚轮事件的监听原理:判断鼠标滚轮的滚动获取一个值,根据这个值判断滚动的方向.分析:首先,判断滚轮方向.Firefox:detail,取值为-/+3(负值向上,正值向下):其他:wheelDelta,取值为+/-120(正值向上,负值向下).兼容所有浏览器的的封装: ? 1 2 3 4 5 6 7 8 9 10 function scrollEvent(ev){     ev = ev || window.event;     var data = '';     if(ev.wheelDel

鼠标滚轮事件MouseWheel

其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox 却不支持此事件,不过庆幸 Firefox  中提供了另外一个等同的事件:"DOMMouseScroll" . OK,我们现在已经知道了不同浏览器之间实现的差别,兼容代码如下: var addEvent = (function () { if (window.addEventListener

鼠标滚轮事件介绍

简介 IE6实现了鼠标滚轮事件mousewheel,这个事件包含了一个鼠标事件所没有的属性,wheelDelta,这 个属性值始终是120的倍数,而且向上滑动一单位,wheelDelta值为120,向下为-120.随后Chrome,Opera, Safari等也都实现了该事件.Opera10之前的版本对wheelDelta值的符号处理错误,需要修改.但是Firefox没 有该事件,而是用DOMMouseScroll.这个事件只有Firefox支持,所以可以单独针对Firefox做兼容. 另外,H

鼠标滚轮事件

由于浏览器的不同,对鼠标滚轮事件也有所不同,大致可分为DOMMouseScroll 和onmousewheel两类 1.第一类是Firefox支持的DOMMouseScroll事件,此事件必须以addEventListener来绑定,当鼠标滚轮上下滚动时 ev.detail向上为-3,向下为3. 2.第二类是IE/chrome支持的onmousewheel事件,当鼠标滚轮上下滚动时 ev.wheelDelta向上为120,向下为-120.

JS鼠标滚轮事件解析

一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有firefox支持) 另外在操作的过程中需要添加事件监听,兼容性写法 代码如下: /*注册事件*/ if(document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); // W3C

js中鼠标滚轮事件详解

(以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用js对鼠标滚轮事件进行控制,滚轮事件其中考虑浏览器兼容性问题 附加事件 其中经我测试,IE/Opera属于同一类型,使用attachEvent即可添加滚轮事件. /*IE注册事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel',scrollFunc

js整频滚动展示效果(函数节流鼠标滚轮事件)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-T