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