16 滾輪事件與鍵盤事件

2022-10-09 06:42:09 字數 2200 閱讀 3930

onmousewheel:滑鼠滾輪滾動的事件,會在滾輪滾動時觸發,但是火狐不支援該屬性

dommousescroll:在火狐中使用dommousescroll來繫結滾動事件,注意該事件需要通過addeventlistener()函式來繫結

event.wheeldelta:可以獲取滑鼠滾輪滾動的方向:向上滾(120),向下滾(-120),這個值我們不看大小,只看正負

event.detailwheeldelta這個屬性火狐中不支援,在火狐中使用event.detail來獲取滾動的方向:向上滾(-3),向下滾(3)

當滾輪滾動時,如果瀏覽器有滾動條,滾動條會隨之滾動,這是瀏覽器的預設行為

如果不希望發生,則可以使用return false來取消預設行為

使用addeventlistener()方法繫結響應函式,取消預設行為時不能使用return false,需要使用event來取消預設行為

但是 ie8 不支援event.preventdefault()這個玩意,如果直接呼叫會報錯

window.onload = function()  else 

}// 使用addeventlistener()方法繫結響應函式,取消預設行為時不能使用return false,需要使用event來取消預設行為

// 但是ie8不支援event.preventdefault()這個玩意,如果直接呼叫會報錯

event.preventdefault && event.preventdefault();

// 當滾輪滾動時,如果瀏覽器有滾動條,滾動條會隨之滾動

// 這是瀏覽器的預設行為,如果不希望發生,則可以取消預設行為

return false;

};// 相容addeventlistener

bind(box1, "dommousescroll", box1.onmousewheel);

}function bind(obj, eventstr, callback) else );}}

效果

onkeydown按鍵被按下

onkeyup按鍵被鬆開

鍵盤事件一般都會繫結給一些可以獲取到焦點的物件或者是document

可以通過keycode來獲取按鍵的編碼,通過它可以判斷哪個按鍵被按下

除了keycode,事件物件中還提供了幾個屬性altkeyctrlkeyshiftkey

這個三個用來判斷altctrlshift是否被按下,如果按下則返回true,否則返回false

《練習:鍵盤移動div>

// 定義速度

var speed = 10;

var box1 = document.getelementbyid("box1");

// 繫結鍵盤響應事件

document.onkeydown = function(event)

return false;

}

效果

鍵盤事件 與 滑鼠滾輪事件

滑鼠滾輪事件,需要適配不同瀏覽器 火狐 dommousescroll進行事件監聽 其他 onmousewheel 進行事件監聽 其他 中 event.wheeldelta 0 和 0分別是向前滾動和向後滾動 滑鼠滾動事件中阻止預設事件時通過 return false來進行操作 altkey ctrl...

滑鼠滾輪事件

新增事件 有相容性 註冊事件 if document.addeventlistener window.onmousewheel document.onmousewheel scrollfunc ie opera chrome detail與wheeldelta 判斷滾輪向上或向下在瀏覽器中也有相容性...

滑鼠滾輪事件

新增事件 有相容性 註冊事件 if document.addeventlistener window.onmousewheel document.onmousewheel scrollfunc ie opera chrome detail與wheeldelta 判斷滾輪向上或向下在瀏覽器中也有相容性...