js捕獲鼠標(biāo)滾輪事件代碼
更新時(shí)間：2013年12月16日 17:37:27 作者：
本文為大家介紹下如何使用js捕獲鼠標(biāo)滾輪事件，原理很簡(jiǎn)單，感興趣的朋友可以參考下
之前看到一個(gè)人人網(wǎng)高級(jí)前端面試的筆試題
要求手寫(xiě)代碼，其中有個(gè)題是做一個(gè)圖片展示
類似百度圖片最下面小縮略圖那個(gè)展示欄
然后要求有個(gè)鼠標(biāo)滾輪滾動(dòng)變大變小的要求
這個(gè)我還真不知道怎么做，在網(wǎng)上找了找資料
發(fā)現(xiàn)可以捕獲onmousewheel的事件
然后根據(jù)event.wheelDelta值的正負(fù)來(lái)判斷是前滾還是后滾
隨便寫(xiě)了個(gè)小例子，順便捕獲下鍵盤(pán)的按鍵，不太美觀沒(méi)有換行
因?yàn)橛胻extNode做的,加不進(jìn)去html代碼
說(shuō)到這里是不是可以用這種方法來(lái)防止xss注入呢？
復(fù)制代碼 代碼如下:
<body onkeydown="showKey()" onmousewheel="showKey()">
復(fù)制代碼 代碼如下:
function showKey(){
if(event.wheelDelta){
復(fù)制代碼 代碼如下:
// 正120為前滾 負(fù)120為后滾
var textNode = document.createTextNode(event.wheelDelta+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
if(event.keyCode)
{
var textNode = document.createTextNode(event.keyCode+" ");
document.body.appendChild(textNode);
document.body.normalize();
}
}
其中還剛好用到今天剛看高級(jí)設(shè)計(jì)那里的textNode元素那塊的一個(gè)
合并多個(gè)textNode的方法
復(fù)制代碼 代碼如下:
normalize();
相關(guān)文章
這篇文章主要介紹了es6數(shù)值的擴(kuò)展方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
QT與javascript交互數(shù)據(jù)的實(shí)現(xiàn)
本文主要介紹了QT與javascript交互數(shù)據(jù)的實(shí)現(xiàn)，主要包括數(shù)據(jù)從QT流向JS以及數(shù)據(jù)從JS流向QT的幾種方法，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
鼠標(biāo)左鍵單擊沖突的問(wèn)題解決方法(防止冒泡)
一個(gè)頁(yè)面實(shí)現(xiàn)了兩種右鍵菜單，當(dāng)鼠標(biāo)左鍵單擊空白處時(shí)，右鍵菜單并不隱藏，下面為大家解決鼠標(biāo)左鍵單擊沖突的問(wèn)題2014-05-05
js實(shí)現(xiàn)貪吃蛇游戲 canvas繪制地圖
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)貪吃蛇游戲，canvas繪制地圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)定位及到指定位置導(dǎo)航的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
詳解原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法
這篇文章主要介紹了原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法,作者根據(jù)jQuery中一些對(duì)AJAX請(qǐng)求的處理方式來(lái)用原生API實(shí)現(xiàn),需要的朋友可以參考下2016-05-05
javascript中方便增刪改cookie的一個(gè)類
把jquery.cookie.js改了一下，改成了純javascript版本，以備我以后項(xiàng)目只需，增加了一個(gè)得到頁(yè)面全部cookie鍵值的功能2012-10-10
onbeforeunload與onunload事件異同點(diǎn)總結(jié)
本文對(duì)onbeforeunload與onunload事件的異同點(diǎn)、觸發(fā)于、可以用在哪些元素以及解決刷新頁(yè)面時(shí)不調(diào)用onbeforeunload等等，感興趣的朋友可以參考下哈2013-06-06
js實(shí)現(xiàn)時(shí)間軸自動(dòng)排列效果
本文主要介紹了js實(shí)現(xiàn)新增加事件：時(shí)間軸自動(dòng)排列效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
寫(xiě)出更好的JavaScript程序之undefined篇（中）
前一篇我介紹了幾種廣為使用的利用undefined這個(gè)概念值的辦法，這一篇我會(huì)介紹一些不太常見(jiàn)的辦法，其中還包括一個(gè)很巧妙的，我個(gè)人覺(jué)得很值得推廣的辦法。2009-11-11