本文為大家介紹下如何使用js捕獲鼠標滾輪事件,原理很簡單,感興趣的朋友可以參考下
之前看到一個人人網高級前端面試的筆試題 要求手寫代碼,其中有個題是做一個圖片展示 類似百度圖片最下面小縮略圖那個展示欄 然後要求有個鼠標滾輪滾動變大變小的要求 這個我還真不知道怎麼做,在網上找了找資料 發現可以捕獲onmousewheel的事件 然後根據event.wheelDelta值的正負來判斷是前滾還是後滾 隨便寫了個小例子,順便捕獲下鍵盤的按鍵,不太美觀沒有換行 因為用textNode做的,加不進去html代碼 說到這裡是不是可以用這種方法來防止xss注入呢? 代碼如下: <body onkeydown="showKey()" onmousewheel="showKey()"> 代碼如下: function showKey(){ if(event.wheelDelta){ 代碼如下: // 正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(); } } 其中還剛好用到今天剛看高級設計那裡的textNode元素那塊的一個 合並多個textNode的方法 代碼如下: normalize();