首頁 > web前端 > js教程 > 主體

淺談Javascript滑鼠和滾輪事件_javascript技巧

WBOY
發布: 2016-05-16 17:52:21
原創
912 人瀏覽過
a)滑鼠事件  

  滑鼠事件也許是web頁面當中最常用到的事件,因為滑鼠是最常用的導航設備,在DOM3級事件上定義了9個滑鼠事件,分別為:

  click:當使用者點擊滑鼠主鍵通常是指滑鼠左鍵或按回車鍵時觸發。

  dbclick:當使用者雙擊滑鼠主鍵時發生觸發,這個事件並沒有在DOM2級事件中定義但是卻被普遍支持了,後來在DOM3級中得到了標準化。

  mousedown:當使用者按下滑鼠任一鍵都會觸發,這個事件是不能夠透過鍵盤觸發的。

  mouseenter:當滑鼠圖示從元素外移動至元素邊界內時觸發。此事件不支援冒泡,而且當滑鼠在元素的上表面移動時負觸發此事件。該事件不屬於DOM2級事件,屬於DOM3級後新增的事件,IE 、FF9 、以及opera支援此事件。

  mouseleave:當滑鼠處於元素上方,之後移出元素邊界是觸發該事件,與mouseenter事件相同,不支援冒泡,在元素上方是不觸發,該事件不屬於DOM2級事件,屬於DOM3級後新增的事件,IE 、FF9 、以及opera支援此事件。

  mousemove:當滑鼠在某元素周圍移動時重複觸發,該事件不能透過鍵盤事件觸發。

  mouseout:當滑鼠處於某一元素上方,之後移動到其他元素上方時觸發。元素移動到原始元素的邊界外,或是原始元素的子元素上,這個事件不能透過鍵盤觸發。

  mouseover:當使用者將滑鼠第一次從某元素邊界外移動到該元素邊界內時觸發,這個事件不能夠透過鍵盤觸發。

  mouseup:當使用者釋放滑鼠按鍵是觸發,這個事件不能夠透過鍵盤觸發。

  頁面上的所有元素都支援滑鼠事件,除了mouseenter和mouseleave外,所有的事件都冒泡,並且他們的預設行為是可以被取消掉的。但取消滑鼠事件的預設行為可能會影響到其他事件,因為有些滑鼠事件是相互依賴的。

  只有當一個mousedown事件和一個mouseup事件在同一個元素上觸發,才能觸發滑鼠的click事件;假設任何一個事件被取消,click事件將永遠不會被觸發。類似的原理dbclick事件依賴click事件,如果連續兩次click事件中任一次被取消,dbclick都不會被觸發。常用的滑鼠事件如下:

  1.mousedown、2.mouseup、3.click、4.mousedown、5.mouseup、6.click、7.dbclick。

  無論是click 或 dbclick事件,都依賴其他事件的觸發。

  你可以透過下面的程式碼來決定瀏覽器是否在dom2事件上支援滑鼠事件,

  var isSupport = document.implementation.hasFeature('MouseEvents','2.0'); 🎜>
  然而值得注意的是在dom3級事件上檢測則有些不同:

  var isSupport = document.implementation.hasFeature('MouseEvent','3.0');在滑鼠事件上也包含一個子類別事件,即wheel事件(滾輪事件)。在wheel事件中只包含一個事件,mousewheel事件,他反應滑鼠滾輪或其他裝置,如mac的touchpad的互動情況。


b)關聯元素

  對於mouseover和mouseout事件來說,還存在著與事件相關的元素,這連個事件所執行的動作包括,移動滑鼠從一個元素邊界內部到另一個元素邊界內部。以mouseover事件為例,他的主要目標元素就是滑鼠將要移至的元素,而那個關聯元素就是失去滑鼠的那個元素。同樣對於mouseout事件,主要目標是那個滑鼠移出的元素,而關聯元素則是獲得滑鼠的元素,DOM透過event物件上的relatedTarget屬性來提供關聯元素的信息,IE8或更早版本的IE不支援relatedTarge屬性,但卻提供了與其功能相似的fromElement屬性和toElement屬性。在IE下,當mousemove事件觸發時,event物件的fromElement包含關聯元素,當mouseout事件觸發時,event的toElement屬性包含關聯元素。在IE9中支援所有的屬性,一個跨瀏覽器的getRelatedTarget方法可以這樣寫:


複製程式碼 程式碼如下: var eventUtil = {
getRelateTarget:function(event){
if (event.relatedTarget) {
return event.relatedTarget;
}else if(event.fffromElement) {
return event.fromElement;
}else if(event.toElement){
return event.toElement;
}else {
return null;
}
}
};



c)buttons

  click事件只有當滑鼠主鍵點擊了某一元素的時候才會觸發(或者當某一元素獲得焦點時按下回車鍵),對於mousedown和mouseup來說,在事件物件event上存在一個屬性button,他可以確定是哪個鍵按下或釋放。在DOM實現的button屬性值通常有三種可能:

  0:代表主鍵,

  1:代表滾輪,

  2:代表滾輪,

  2:代表副鍵。

  在一般情況下主鍵指的是滑鼠的左鍵,副鍵代表滑鼠右鍵。

  從IE8開始也提供了button屬性,但卻有著完全不同的取值範圍: 

  0 :沒有按鍵按下,

  0 :沒有按鍵按下,

  下,

  2 :代表副鍵已經被按下,

  3 :主鍵副鍵都被按下,

  4 :代表中間鍵都被按下,

  5 :代表主鍵和中間件被按下,

  6 :代表副鍵和中間鍵被按下,

  7 代表三個鍵被按下,   7 代表三個鍵被按下。

  可見DOM 模型下的button屬性的取值範圍比IE模型下的取值範圍要簡單的多,而且個人覺得ie下的操作情況略顯變態。

d)其他事件資訊   在DOM2級事件上,為事件物件event也提供了detail屬性來提供更多的事件資訊,例如對於點擊事件來說,detail可以記錄相同像素位置的點擊次數,detail的值是從1開始計數的,每次點擊後加一,如果在mousedown和mouseup之間,滑鼠發生移動,這個值將會被清除。 關於老鼠事件就先寫這些,日後在慢慢補全。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板