`
zhangyaochun
  • 浏览: 2553292 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

mousewheel与DOMMouseScroll

阅读更多

最近在研究设计grid的时候,再再一次地遇到这个小问题。

----很多自己开发和编写过grid的时候会考虑自己渲染横向和纵向的scroller,然后给其绑定事件,这个就会遇到一个兼容性api的差异

 

1. mousewheelDOMMouseScroll

 

这个应该有点经验的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);

}
 

其实从代码的角度我们大致可以看到:

 

 

  • detailwheelDelta的区别
  • 还有单位制3还是120
  • 为什么event.detail前面还有-(负号)
  • 正负代表向前向后
下面详细说一下:
 
1.mousewheel事件有event.wheelDelta
   ----------如果返回的是正的值就说明向上(前)滚动了,反之如果负值就向下(后)。
   ---------返回的值多是120的倍数,所以 返回的值/120
 
2.DeltaDOMMouseScroll事件有event.detail
   ----------如果是负值说明向上(前)滚动了,反之如果是正值就向下(后)。 -------(这点和上面相反)
   ---------返回的值多是3的倍数,所以  返回值/3

 

1
0
分享到:
评论

相关推荐

    浅谈 Mousewheel 事件

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

    html中鼠标滚轮事件onmousewheel的处理方法

    滚轮事件是不同浏览器会有一点点区别,一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件,其他的浏览器滚轮事件使用mousewheel,下面我来给大家具体介绍。 Firefox使用...

    javascript 兼容鼠标滚轮事件

    firefox是按标准实现的,事件名为”DOMMouseScroll “,IE下采用的则是”mousewheel “。当然一行代码就解决了兼容问题 代码如下:var mousewheel = document.all?”mousewheel”:”DOMMouseScroll”; 事件属性,IE是...

    vue实现全屏滚动效果(非fullpage.js)

    本文实例为大家分享了vue实现...使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformY(屏高)或者transformX(屏宽) 代码实现 HTML <div class=fullPa

    使用原生JS实现滚轮翻页效果的示例代码

    在IE6, IE7, IE8, Opera 10+, Safari 5+中,都提供了 “mousewheel” 事件,而 Firefox 3.5+ 中提供了一个等同的事件:”DOMMouseScroll”。与mousewheel事件对应的event对象中我们还会用到另一个特殊属性—...

    javascript实现禁止鼠标滚轮事件

    但是火狐却偏偏不支持MouseWheel,而使用无厘头的DOMMouseScroll,这玩意儿除了火狐以外其它浏览器都不兼容。也就是说,对于鼠标滚轮事件的处理,火狐只能使用DOMMouseScroll。而非火狐则只能使用MouseWheel。这两种...

    解析javascript中鼠标滚轮事件

    除了Firefox之外的所有浏览器都支持“mousewheel”事件,但Firefox使用“DOMMouseScroll”,而3级DOM事件规范草案建议使用事件名“wheel”替代“mousewheel”。 document.body.onmousewheel = function(event){ ...

    JS滚轮事件onmousewheel使用介绍

    典型的应用时鼠标滚轮滚动控制图片或者文字的大小,例如此类的转动鼠标滚轮实现缩放等等交互效果中,会用到 Mousewheel 事件。在大多数浏览器(IE6, IE7, IE8, Opera 10+, Safari 5+)中,都提供了 “mousewheel” ...

    10个至强JavaScript代码

    /* ==== add mouse wheel events ==== */ if (window.addEventListener) this.oc.addEventListener('DOMMouseScroll', function(e) { this.parent.scroll(-e.detail); }, false); else this.oc....

    javascript监听鼠标滚轮事件浅析

    主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件。 另外在操作的过程中需要添加...

    js模拟滚动条(横向竖向)

    JS: 代码如下:(function(win){ var ... ‘mousewheel’ : ‘DOMMouseScroll’; var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);}; skyScroll.prototype = { constructor:skyScroll, /

    JavaScript 滚轮事件使用说明

    一) 事件名称不相同 IE, KHTML(Safari, Chrome), Opera对应的事件名称是 “mousewheel”。而 Gecko(Firefox, Netscape) 对应的事件名称是 “DOMMouseScroll”。 二) 事件对象的属性不一样 有时我们需要知道用户是...

    Js控制滑轮左右滑动实例

    chrome:mousewheel 哎真是无语 滚动的返回值也是不一样的 firfox用detail 返回 +-3 其他的用wheelDelta 返回 +-120 有返回值判断滚动的方向 还有一般浏览器除了chrome判断页面的左移动用documen

    基于jquery的滚动鼠标放大缩小图片效果

    $(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);//放大图片

    jQuery仿写百度百科的目录树

    2、针对第二个需求,定义鼠标的滚动事件mousewheel(在ff下事件为DOMMouseScroll),当时自己琢磨了半天用各种方法计算,但效果始终无法达到要求,后来分析了百度的实现源码恍然大悟,具体实现参考下图和代码部分。

Global site tag (gtag.js) - Google Analytics