最近在研究设计grid的时候,再再一次地遇到这个小问题。
----很多自己开发和编写过grid的时候会考虑自己渲染横向和纵向的scroller,然后给其绑定事件,这个就会遇到一个兼容性api的差异
1. mousewheel与DOMMouseScroll
这个应该有点经验的fe会知道这个api的差异。当然可能经验多一点点的人会看到以前的部分js的lib库在判断ff浏览器的时候用document.getBoxObjectFor这个特性去做(http://zhangyaochun.iteye.com/blog/1187180)这里附上昨天的记录。其实记录的本意是想告诫自己和所有同学虽然部分特性可能在你的browser.js的库里面很有效(代码量很完美),但是一旦浏览器版本升级,这样的特性是否还存在?所有还是建议规规矩矩的(navigator.userAgent)
2.上代码
//主要的是区分ff和其他浏览器去绑定事件 //思想来源于tangram和prototype /* *isGecko -- judge the browser is Gecko* *@function* *@return {Boolean}* *you can also like prototype.js* navigator.userAgent.indexOf('Gecko')>-1 && navigator.userAgent.indexOf('KHTML') == -1 */ ZYC.browser.isGecko = /gecko/i.test(navigator.userAgent) && !/like gecko/i.test(navigator.userAgent);
//有了兼容性判断后下面就是对应绑定事件了 //1.自己定义一个wheel事件 function wheel(event){ //先暂时不放出来 } if(!ZYC.browser.isGecko){ //绑mousewheel }else{ //ff去绑DOMMouseScroll }
3、 到目前位置还没用完全完成,虽然我们多知道,而且能判断当前浏览器,然后绑定事件了,那问题就来了
- 第一:我鼠标滚轴向前向后咋区分?
- 第二:里面是不是还有兼容性的问题?
我先放出上面wheel事件里面的代码吧
//出现的event的属性后面会详细说明 function wheel(event){ //获得滚轴的向前向后 var num = event.detail? (- event.detail /3) : (event.wheelDelta /120); }
其实从代码的角度我们大致可以看到:
- 有detail和wheelDelta的区别
- 还有单位制3还是120
- 为什么event.detail前面还有-(负号)
- 正负代表向前向后?
下面详细说一下:
1.mousewheel事件有event.wheelDelta
----------如果返回的是正的值就说明向上(前)滚动了,反之如果负值就向下(后)。
---------返回的值多是120的倍数,所以 返回的值/120
2.DeltaDOMMouseScroll事件有event.detail
----------如果是负值说明向上(前)滚动了,反之如果是正值就向下(后)。 -------(这点和上面相反)
---------返回的值多是3的倍数,所以 返回值/3
相关推荐
其实在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” 事件。但杯具的是 Firefox 3.5+ 却不支持此事件,不过庆幸 Firefox 3.5+ 中提供了另外一个等同的事件:”DOMMouseScroll” ...
滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍。 Firefox使用...
firefox是按标准实现的,事件名为”DOMMouseScroll “,IE下采用的则是”mousewheel “。当然一行代码就解决了兼容问题 代码如下:var mousewheel = document.all?”mousewheel”:”DOMMouseScroll”; 事件属性,IE是...
本文实例为大家分享了vue实现...使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformY(屏高)或者transformX(屏宽) 代码实现 HTML <div class=fullPa
在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件,而 Firefox 3.5+ 中提供了一个等同的事件:”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—...
但是火狐却偏偏不支持MouseWheel,而使用无厘头的DOMMouseScroll,这玩意儿除了火狐以外其它浏览器都不兼容。也就是说,对于鼠标滚轮事件的处理,火狐只能使用DOMMouseScroll。而非火狐则只能使用MouseWheel。这两种...
除了Firefox之外的所有浏览器都支持“mousewheel”事件,但Firefox使用“DOMMouseScroll”,而3级DOM事件规范草案建议使用事件名“wheel”替代“mousewheel”。 document.body.onmousewheel = function(event){ ...
典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件。在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” ...
/* ==== add mouse wheel events ==== */ if (window.addEventListener) this.oc.addEventListener('DOMMouseScroll', function(e) { this.parent.scroll(-e.detail); }, false); else this.oc....
主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件。 另外在操作的过程中需要添加...
JS: 代码如下:(function(win){ var ... ‘mousewheel’ : ‘DOMMouseScroll’; var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);}; skyScroll.prototype = { constructor:skyScroll, /
一) 事件名称不相同 IE, KHTML(Safari, Chrome), Opera对应的事件名称是 “mousewheel”。而 Gecko(Firefox, Netscape) 对应的事件名称是 “DOMMouseScroll”。 二) 事件对象的属性不一样 有时我们需要知道用户是...
chrome:mousewheel 哎真是无语 滚动的返回值也是不一样的 firfox用detail 返回 +-3 其他的用wheelDelta 返回 +-120 有返回值判断滚动的方向 还有一般浏览器除了chrome判断页面的左移动用documen
$(function(){ $(“.body img”).each(function(){ if($.browser.msie){ $(this).bind(“mousewheel”,function(e){ var e=e||event,v=e.wheelDelta||e.detail; if(v>0) resizeImg(this,false);//放大图片
2、针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天用各种方法计算,但效果始终无法达到要求,后来分析了百度的实现源码恍然大悟,具体实现参考下图和代码部分。