鼠標與滾輪事件

《javascript高級程序設計》13章 --- 13.4.3 筆記

一 、DOM3級事件定義了9個鼠標事件

a. click 單擊主鼠標按鈕（通常是左邊的按鈕）或者按下回車鍵時觸發。意味着click便可以經過鍵盤也能夠經過鼠標觸發事件

b. dblclick 雙擊主鼠標按鈕（通常是左邊的按鈕）時觸發

c. mousedown 按下任意鼠標按鈕觸發，不能經過鍵盤觸發

d. mouseenter 鼠標光標從元素外部首次移到元素範圍以內觸發，這個事件不冒泡。並且光標移動到後代元素上不會觸發。IE,Firefox9+,Opera支持這個事件

e. mouseleave 在位於元素上方的鼠標光標移到元素範圍以外觸發，這個事件不冒泡。並且光標移動到後代元素上不會觸發。IE,Firefox9+,Opera支持這個事件

f. mousemove 當鼠標指針在元素內部移動時重複觸發，不能經過鍵盤觸發這個事件

g. mouseout  在鼠標指針位於一個元素上方，而後將其移入另外一個元素時觸發。又移入的另外一個元素可能位於前一個元素的外部，也多是這個元素的子元素，不能經過鍵盤觸發這個事件

h. mouseover  在鼠標指針位於一個元素外部，而後將其首次移入另外一個元素邊界以內觸發，不能經過鍵盤觸發

i. mouseup  釋放鼠標按鈕時觸發。不能經過鍵盤觸發

全部元素都支持鼠標事件，除了mouseleave,mouseenter以外的全部鼠標事件都支持冒泡。取消鼠標事件將會影響瀏覽器的默認行爲。還會影響到其餘事件

--------------------------------------------------

1. 只有在同一個元素上相繼觸發了mousedown和mouseup事件，纔會觸發click事件，若mousedown和 mouseup中的一個被取消，那click事件就不會觸發

2. 只有觸發兩次click事件，才能觸發dblclick事件，只要其中有任意一個事件取消，就不會觸發dblclick事件，它在內部的事件觸發流程以下

  mousedown ---> mouseup ---> click ---> mousedown ---> mouseup –-> click ---> dblclick

  在ie< 9中，雙擊事件會跳過第二個mousedown和click事件，其順序以下

  mousedown ---> mouseup ---> click ---> mouseup ---> dblclick

 3.DOM2事件檢測 document.implementation.hasFeature(‘MouseEvents’,’2.0’)   2級爲MouseEvents

   DOM3事件檢測則爲 document.implementation.hasFeature(‘MouseEvent’,’3.0’) 3級爲MouseEvent

 

2、其餘事件信息

  1.客戶區座標位置  event.clientX  / event.clientY 表示事件發生時鼠標指針在視口中的水平和垂直座標（不包含滾動的距離

  2.頁面座標位置  event.pageX /event.pageY  表示事件發生時鼠標指針在頁面中的水平和垂直座標（包含滾動距離）  IE < 9 不支持此屬性，能夠經過客戶區座標和滾動信息（document.body 混雜模式  || document.documentElement 標準模式）計算

  3. 屏幕座標位置 event.screenX /event.screenY 表示事件發生時鼠標指針在整個屏幕的座標信息

  4.  修改鍵  主要爲Shift,Ctrl,Alt, Meta(在windows鍵盤中爲windows鍵，在蘋果機中爲Cmd鍵），DOM規定了4個屬性shiftKey,ctrlKey,altKey,metaKey，檢測事件發生時，是否同時按下了這4個鍵，如果返回true,不然爲false (IE < 9不支持metaKey這個屬性）

   5.  相關元素 發生mouseover mouseout事件時，還會涉及到更多元素。這兩個事件都會涉及把鼠標指針從一個元素的邊界移到到另外一個元素的邊界以內。對mouseover事件而言，事件的主目標就是獲取光標的元素，而相關元素就是那個失去光標的元素

    DOM經過Event對象的relatedTarget屬性提供了相關元素的信息，這個屬性只對於mouseover  mouseout事件才包含值，其餘事件這個屬性值爲null，IE < 9 沒這個屬性，但能夠經過fromElement和toElement保存着這些信息  （在mouseover中fromElment保存着相關元素。mouseout中toElement保存着相關元素)

  6. 鼠標按鈕 對於mousedown與mouseup來講，其event對象中有一個button屬性，表示按下或釋放的按鈕

      DOM的button屬性可能有3個值： 0  --- 主鼠標按鈕（左鍵）  1 ---- 中間的鼠標按鈕（滾輪） 2---次鼠標按鈕（  右鍵）

     IE < 9 的button屬性值以下

      0 ----- 沒按下按鈕          1----- 主鼠標按鈕        2 ------- 次鼠標按鈕      3----- 同時按下主與次鼠標按鈕

      4 ------ 中間的鼠標按鈕  5 ----- 主與中間鼠標按鈕  6----- 次與中間鼠標按鈕  7 ------ 同時按下3個鼠標按鈕

  7.  更多的事件信息

    detail屬性，用於給出有關事件的更多信息，對於 鼠標事件來講，就是一個數值，表示在給定位置上發生了多少次單擊，在同一個元素上相繼地發生一次mousedown和一次mouseup事件算做一次單擊，detail屬性從1開始計數，每次單擊發生後都會遞增，若是鼠標在mousedown和mouseup之間移動了位置，則detail會重置爲0

   IE事件更多鼠標點擊信息

     altLeft /ctrlLeft/shiftLeft  布爾值，表示是否同時按下了alt,ctrl,shift鍵，若爲true,那麼對應的修改鍵屬性也爲true

     offsetX/offsetY  光標相對目標元素邊界的X、Y座標

8.  鼠標滾輪事件 這個事件能夠在任何元素是觸發，但最終會冒泡到document(IE< 9) 或 window(IE > 8 ,opera,chrome,safari)

     IE ,opera,safari,chrome 支持mousewheel,其event對象有一個wheelDelta屬性，當用戶滾動滾輪時，wheelDelta是120的倍數，向後是-120的倍數，向前是120的倍數

    在opera9.5以前的版本中wheelDelta值的正負號是顛倒的

    Firefox支持DOMMouseScroll事件，該事件會冒泡到window對象上，其有關鼠標滾輪事件的信息保存在detail屬性中，向前滾動是-3的倍數，向後是3的倍數

9. 觸摸設備

  面向iPhone 或iPod中的safari開發時，注意如下幾點

  a.  不支持dblclick事件，雙擊瀏覽器會放大畫面，沒辦法改變該行爲

  b.  輕擊可單擊元素會觸發mousemove事件，若是此操做會致使內容變化，將再也不有其餘事件發生，若是屏幕沒有所以變化，那麼會依次發生mousedown mouseup click事件，輕擊不可單擊的元素不會觸發任何事件（可單擊元素拗可產生默認操做的元素[link標籤]或那些已被指定onclick元素處理程序的元素）

  c. mousemove事件會觸發mouseover mouseout事件

  d. 兩個手指放在屏幕上且頁面隨手指移動而滾動時會觸發mousewheel和scroll事件