亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

html中鼠標(biāo)滾輪事件onmousewheel的處理方法

 更新時(shí)間:2016年11月11日 08:47:08   投稿:jingxian  
下面小編就為大家?guī)?lái)一篇html中鼠標(biāo)滾輪事件onmousewheel的處理方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

滾輪事件是不同瀏覽器會(huì)有一點(diǎn)點(diǎn)區(qū)別,一個(gè)像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法綁定DomMouseScroll事件,其他的瀏覽器滾輪事件使用mousewheel,下面我來(lái)給大家具體介紹。

Firefox使用DOMMouseScroll,其他的瀏覽器使用mousewheel。滾動(dòng)事件觸發(fā)時(shí)Firefox使用detail屬性捕捉滾輪信息,其他的瀏覽器使用wheelDelta。不知道為何在該問題上其他廠商和微軟的如此一致。Firefox可以使用addEventListener方法綁定DomMouseScroll事件。

elem.addEventListener(‘DOMMouseScroll', func, false);IE和其他的主流瀏覽器可以使用傳統(tǒng)的事件綁定模型。但不要使用IE專有的attachEvent方法,其他主流瀏覽器并不識(shí)別微軟的這個(gè)方法。

Firefox 鼠標(biāo)滾輪向上滾動(dòng)是-3,向下滾動(dòng)是3

IE 鼠標(biāo)滾輪向上滾動(dòng)是120,向下滾動(dòng)是-120

Safari 鼠標(biāo)滾輪向上滾動(dòng)是360,向下滾動(dòng)是-360

Opera 鼠標(biāo)滾輪向上滾動(dòng)是120,向下滾動(dòng)是-120

Chrome 鼠標(biāo)滾輪向上滾動(dòng)是120,向下滾動(dòng)是-120

有人在Safari下做了一些測(cè)試:”只是滾動(dòng)一圈的話,值為+-0.1,如果滾動(dòng)地稍微快點(diǎn)的話(多滾動(dòng)幾圈),這個(gè)值也會(huì)變大。 這是因?yàn)镸ac OS下有鼠標(biāo)滾輪加速功能。滾動(dòng)一次,瀏覽器滾動(dòng)1像素,滾動(dòng)3次,瀏覽器卻滾動(dòng)30像素”。同時(shí)他也對(duì)Camino(基于Gecko的內(nèi)核引擎)進(jìn)行研究:“與Safari相似(+- 0.3 to +-Infinity),雖然使用了與firefox相同的內(nèi)核引擎,但結(jié)果這個(gè)delta值卻只在+-2.666666里浮動(dòng),無(wú)論滾動(dòng)速度如何

其中經(jīng)我測(cè)試,IE/Opera屬于同一類型,使用attachEvent即可添加滾輪事件。

/*IE注冊(cè)事件*/  
if(document.attachEvent){  
  document.attachEvent('onmousewheel',scrollFunc);  
} 

Firefox使用addEventListener添加滾輪事件

 

/*Firefox注冊(cè)事件*/  
if(document.addEventListener){  
  document.addEventListener('DOMMouseScroll',scrollFunc,false);  
} 

 Safari與Chrome屬于同一類型,可使用HTML DOM方式添加事件

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

其中除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式

/*注冊(cè)事件*/  
if(document.addEventListener){  
  document.addEventListener('DOMMouseScroll',scrollFunc,false);  
}//W3C  
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome 

detail與wheelDelta

判斷滾輪向上或向下在瀏覽器中也要考慮兼容性,現(xiàn)在五大瀏覽器(IE、Opera、 Safari、Firefox、Chrome)中Firefox 使用detail,其余四類使用wheelDelta;兩者只在取值上不一致,代表含義一致,detail與wheelDelta只各取兩個(gè) 值,detail只取±3,wheelDelta只取±120,其中正數(shù)表示為向上,負(fù)數(shù)表示向下。

<p style="border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; list-style:none; text-indent:2em"><label for="wheelDelta"> 滾動(dòng)值:</label>(IE/Opera)<input type="text" id="wheelDelta" style="border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"></p> 
<p style="border-width:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:8px; list-style:none; text-indent:2em"><label for="detail"> 滾動(dòng)值:(Firefox)</label><input type="text" id="detail" style="border-width:0px; padding-top:0px; padding-bottom:0px; margin:0px; list-style:none"></p> 
<script type="text/javascript"> 
  var oTxt = document.getElementById("txt"); 
  var scrollFunc = function (e) { 
    var direct = 0; 
    ee = e || window.event; 
 
    var t1 = document.getElementById("wheelDelta"); 
    var t2 = document.getElementById("detail"); 
    if (e.wheelDelta) {//IE/Opera/Chrome  
      t1.value = e.wheelDelta; 
    } else if (e.detail) {//Firefox  
      t2.value = e.detail; 
    } 
    ScrollText(direct); 
  } 
  /*注冊(cè)事件*/ 
  if (document.addEventListener) { 
    document.addEventListener('DOMMouseScroll', scrollFunc, false); 
  }//W3C  
  window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari  
<p></script></p>

以上就是小編為大家?guī)?lái)的html中鼠標(biāo)滾輪事件onmousewheel的處理方法全部?jī)?nèi)容了,希望大家多多支持腳本之家~

相關(guān)文章

  • JavaScript實(shí)現(xiàn)Excel表格效果

    JavaScript實(shí)現(xiàn)Excel表格效果

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)Excel表格效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-02-02
  • uniapp安卓本地寫入讀取文件簡(jiǎn)單示例

    uniapp安卓本地寫入讀取文件簡(jiǎn)單示例

    這篇文章主要給大家介紹了關(guān)于uniapp安卓本地寫入讀取文件的相關(guān)資料,在uniapp中可以使用uni-app提供的API實(shí)現(xiàn)本地文件讀取和寫入,需要的朋友可以參考下
    2023-11-11
  • 原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例

    原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例

    下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-10-10
  • JavaScript閉包實(shí)例詳解

    JavaScript閉包實(shí)例詳解

    這篇文章主要介紹JavaScript閉包知識(shí),包括閉包的基本概念,閉包的用途等相關(guān)知識(shí),介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起看看吧
    2016-06-06
  • ECMAScript中var let const常見問題及區(qū)別詳解

    ECMAScript中var let const常見問題及區(qū)別詳解

    這篇文章主要為大家介紹了ECMAScript中var let const常見問題及區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-02-02
  • js實(shí)現(xiàn)導(dǎo)航吸頂效果

    js實(shí)現(xiàn)導(dǎo)航吸頂效果

    本文主要分享了js實(shí)現(xiàn)導(dǎo)航吸頂效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-02-02
  • JavaScript如何向頁(yè)面中添加一個(gè)按鈕

    JavaScript如何向頁(yè)面中添加一個(gè)按鈕

    這篇文章主要介紹了JavaScript如何向頁(yè)面中添加一個(gè)按鈕,使用兩種方式向頁(yè)面中添加一個(gè)按鈕,分別是appendChild()和innerHTML屬性,本文結(jié)合示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-10-10
  • JavaScript獲取對(duì)象key的幾種方法和區(qū)別

    JavaScript獲取對(duì)象key的幾種方法和區(qū)別

    這篇文章主要介紹了JavaScript獲取對(duì)象key的幾種方法和區(qū)別,下面文章更多的相關(guān)資料需要的小伙伴可以參考一下,希望對(duì)你有所幫助
    2022-03-03
  • JavaScript設(shè)置FieldSet展開與收縮

    JavaScript設(shè)置FieldSet展開與收縮

    JavaScript設(shè)置FieldSet展開與收縮實(shí)現(xiàn)代碼。
    2009-05-05
  • js確定對(duì)象類型方法

    js確定對(duì)象類型方法

    再讀《JavaScript權(quán)威指南》(犀牛書)9.7確定對(duì)象類型 之摘錄
    2012-03-03

最新評(píng)論