Mouse Wheel Programming In JavaScript

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

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

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

存在的兼容性問題：

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

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

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

IE/Chrome向上滾動為120，向下滾動為-120；FF向上滾動為-3，向下滾動為3

貼碼：

var oDelta=document.getElementById("Delta");
var num=0;
function mouseScroll(e){
    //事件對象兼容
    var e=e||window.event;
    var down=null;
    if(e.wheelDelta){
        down=e.wheelDelta;//IE,Chrome
    }else{
        down=-e.detail;//FF,注意負(fù)號
    }
    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.本人沒有測試，查資料（傳送門）得知，和IE/Chrome一樣，只有FF獨(dú)特

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/87531.html

相關(guān)文章

python setup.py 淺析

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

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

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

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

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

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

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

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

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

Jochen 2019-08-22 11:07 評論0 收藏0