Mouse Wheel Programming In JavaScript

weapon 發(fā)布于2019-08-21 12:17 / 1241人閱讀

摘要：在編程當(dāng)中經(jīng)常會(huì)用到鼠標(biāo)滾輪事件，但是要實(shí)現(xiàn)這個(gè)效果不得不考慮兼容情況存在的兼容性問題事件對(duì)象兼容，是，而只需要傳個(gè)參數(shù)就行滾輪事件使用，而就獨(dú)樹一幟，使用獲取滾輪的值使用的事件對(duì)象的，而采用的是向上滾動(dòng)為，向下滾動(dòng)為向上滾動(dòng)為，向下滾

在JS編程當(dāng)中經(jīng)常會(huì)用到鼠標(biāo)滾輪事件，但是要實(shí)現(xiàn)這個(gè)效果不得不考慮兼容情況

存在的兼容性問題：

事件對(duì)象兼容，IE是window.event，而FF只需要傳個(gè)參數(shù)（event）就行

滾輪事件：IE/Chrome 使用onmousewheel，而FF就獨(dú)樹一幟，使用DOMMouseScroll

獲取滾輪的值：IE/Chrome使用onmousewheel的事件對(duì)象event的wheelDelta，而FF采用的是detail

IE/Chrome向上滾動(dòng)為120，向下滾動(dòng)為-120；FF向上滾動(dòng)為-3，向下滾動(dòng)為3

貼碼：

var oDelta=document.getElementById("Delta");
var num=0;
function mouseScroll(e){
    //事件對(duì)象兼容
    var e=e||window.event;
    var down=null;
    if(e.wheelDelta){
        down=e.wheelDelta;//IE,Chrome
    }else{
        down=-e.detail;//FF,注意負(fù)號(hào)
    }
    counter(down);
}

//添加事件
if(document.addEventListener){document.addEventListener("DOMMouseScroll",mouseScroll,false);}//FF
document.onmousewheel=mouseScroll;//IE/Chrome

//計(jì)數(shù)
function counter(count){
    if(count>0){
        oDelta.value=num++;
    }else if(count<0){
        oDelta.value=num--;
    }
}

注：至于其他瀏覽器：如Opera，Safari.本人沒有測(cè)試，查資料（傳送門）得知，和IE/Chrome一樣，只有FF獨(dú)特

GPU云服務(wù)器云服務(wù)器 javascript in wheel Mouse mouse事件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87531.html

相關(guān)文章

python setup.py 淺析

摘要：淺析參數(shù)說明對(duì)于所有列表里提到的純模塊做處理需要在腳本里有一個(gè)包名到目錄的映射。闡明包名到目錄的映射，見鍵代表了包的名字，空的包名則代表不在任何包中的頂層包。最終會(huì)在下生成可執(zhí)行文件，調(diào)用制定的函數(shù)實(shí)例分析 python setup.py 淺析 setuptools.setup() 參數(shù)說明 packages 對(duì)于所有 packages 列表里提到的純 Python 模塊做處理需要...

sevi_stuo 2019-07-31 11:20 評(píng)論0 收藏0
jquery插件Nicescroll 3(非常類似IOS原生的滾動(dòng)條) （轉(zhuǎn)）

摘要：使用了很多的滾動(dòng)條插件，如這次說說，支持水平滾動(dòng)條，支持文本區(qū)和文檔頁面滾動(dòng)條。，兼容所有的桌面瀏覽器。，兼容移動(dòng)設(shè)備黑莓手機(jī)和芒果。，兼容所有觸摸設(shè)備平板電腦窗口接口。，簡(jiǎn)單的安裝和激活不破壞代碼。使用了很多的滾動(dòng)條插件，如Iscroll,swiper,這次說說Nicescroll 1，支持水平滾動(dòng)條! 2，支持div,IFrames,文本區(qū)和文檔頁面滾動(dòng)條。 3，兼容所有的桌面...

B0B0 2019-08-21 10:54 評(píng)論0 收藏0
通過demo學(xué)習(xí)OpenStack開發(fā)所需的基礎(chǔ)知識(shí) -- 軟件包管理

摘要：不幸的是，在軟件包管理十分混亂，至少歷史上十分混亂。的最大改進(jìn)是將函數(shù)的參數(shù)單獨(dú)放到一個(gè)的文件中這些成為包的元數(shù)據(jù)。基于的版本號(hào)管理。的版本推導(dǎo)這里重點(diǎn)說明一下基于的版本號(hào)管理這個(gè)功能。開發(fā)版本號(hào)的形式如下。為什么寫這個(gè)系列 OpenStack是目前我所知的最大最復(fù)雜的基于Python項(xiàng)目。整個(gè)OpenStack項(xiàng)目包含了數(shù)十個(gè)主要的子項(xiàng)目，每個(gè)子項(xiàng)目所用到的庫也不盡相同。因此，對(duì)于...

blastz 2019-07-31 11:39 評(píng)論0 收藏0
React系列 --- Jsx, 合成事件與Refs(二)

摘要：系列系列簡(jiǎn)單模擬語法一系列合成事件與二系列算法實(shí)現(xiàn)分析三系列從到再到四系列與部分源碼解析五系列從使用了解的各種使用方案六的誕生他是的一種擴(kuò)展語法。這個(gè)函數(shù)接受組件的實(shí)例或元素作為參數(shù)，以存儲(chǔ)它們并使它們能被其他地方訪問。 React系列 React系列 --- 簡(jiǎn)單模擬語法(一)React系列 --- Jsx, 合成事件與Refs(二)React系列 --- virtualdom di...

LiuZh 2019-08-26 10:37 評(píng)論0 收藏0
javascript之模擬類繼承

摘要：歡迎關(guān)注我的博客正文讓我來構(gòu)造函數(shù)其實(shí)，模擬一個(gè)類的方式非常的簡(jiǎn)單構(gòu)造函數(shù)。我們先來看一個(gè)例子這里通過構(gòu)造函數(shù)模擬出來的類，其實(shí)和其他語言的類行為上是基本一致的，唯一的區(qū)別就是它不具備私有方法。前言 ES6時(shí)代的來臨，使得類繼承變得如此的圓滑。但是，你有思考過ES6的類繼承模式嗎？如何去實(shí)現(xiàn)它呢？類繼承對(duì)于JavaScript來說，實(shí)現(xiàn)方式與Java等類語言大不相同。熟悉JavaS...

Jochen 2019-08-22 11:07 評(píng)論0 收藏0