之前看到一個人人網高階前端面試的筆試題
要求手寫程式碼，其中有一個問題是做一個圖片展示
類似百度圖片最下面小縮圖那個展示欄
然後要求有個滑鼠滾輪滾動變大變小的要求
這個我還真不知道怎麼做，在網路上找了找資料
發現可以捕獲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();