JavaScript事件類型中焦點、滑鼠和滾輪事件詳解，javascript滾輪

JavaScript事件類型中焦點、滑鼠和滾輪事件詳解，javascript滾輪

本文針對JavaScript 事件中“事件類型”下“焦點、滑鼠和滾輪事件”的注意要點進行整理，分享給大家供大家參考，具體內容如下

一、焦時間點事件

一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有：

• blur：元素失去焦點，不會冒泡；
• DOMFocusIn：同HTML事件focus，於DOM3遭廢棄，選用focusin；
• DOMFocusOut：同HTML事件blur，於DOM3遭廢棄，選用focusout；
• focus：元素獲得焦點，不回冒泡；
• focusin：獲得焦點，與HTML事件focus等價，但會冒泡；
• focusout：失去焦點，與HTML事件blur等價；
  

如：

window.onfocus = function () {  console.log('focus'); //focus  console.log(document.hasFocus()); //True}window.onblur = function () {  console.log('blur'); //blur  console.log(document.hasFocus()); //False}

當焦點從頁面中的一個元素轉移到另一個元素會觸發下面的事件：

focusout --> focusin --> blur --> DOMFocusOut --> focus --> DOMFocusIn

二、滑鼠事件

DOM3級事件中定義了9個滑鼠事件：

• click
• dblclick
• mousedown：使用者按下任意滑鼠按鍵時觸發，不能通過鍵盤觸發這個事件；
• mouseup：使用者釋放滑鼠按鍵時觸發，不能通過鍵盤觸發這個事件；
• mousemove：不能通過鍵盤觸發這個事件；
• mouseenter：不冒泡，且游標移動到後代元素上不會觸發；
• mouseleave：不冒泡，且游標移動到後代元素上不會觸發；
• mouseover：游標移動到後代元素上會觸發；
• mouseout：游標移動到後代元素上會觸發；
  

舉例如下：

div.onmouseover = function() {  console.log('mouseover'); //在子項目上會觸發}div.onmouseout = function() {  console.log('mouseout'); //在子項目上會觸發}div.onmouseenter = function() {  console.log('mouseenter'); //在子項目上不會觸發}div.onmouseleave = function() {  console.log('mouseleave'); //在子項目上不會觸發}

只有在同一個元素上相繼除法mousedown和mouseup事件，才會觸發click事件；只有觸發兩次click事件，才會觸發依次dblclick事件。

順序如下：

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

IE8之前的版本中有一個bug，在雙擊事件中，會跳過第二個mousedown和click事件

三、滾輪事件

1、客戶區座標位置clientX和clientY屬性

如：

window.onmousemove = function() {    clickX = event.clientX;    clickY = event.clientY;    var div = document.createElement("img");    div.src = "hhh.gif"    div.style.position = "absolute";    div.style.width = '100px';    div.style.left = clickX + "px";    div.style.top = clickY + "px";    document.body.appendChild(div);};

2、頁面座標位置pageX與pageY；

window.onclick = function() {    clickX = event.pageX;    clickY = event.pageY;    var div = document.createElement("img");    div.src = "ppp.png"    div.style.position = "absolute";    div.style.width = '100px';    div.style.left = clickX + "px";    div.style.top = clickY + "px";    document.body.appendChild(div);};

在IE8及更早版本中不支援這個頁面座標位置，可以計算出來，需要用到混合模式下的document.body和標準模式下的document.documentElement中的scrollLeft和scrollTop屬性：

if (clickX === undefined) {  clickX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);};if (clickY === undefined) {  clickY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);};

3、螢幕座標位置screenX和screenY；

通過該屬性可以獲得相對於螢幕的座標。

4、修改鍵

修改鍵有Shift、Ctrl、Alt、Meta（window上的Windows鍵，蘋果機上的Cmd鍵）；對應的修改鍵的狀態是shiftKey、ctrlKey、altKey、metaKey，這些屬性包含的都是布爾值，如果相應的鍵被按下了，則為true，否則為false。如：

var array = [];var timing = setTimeout(showArray, 100);window.onclick = function() {  if (event.shiftKey) {    array.push("shift");  };  if (event.ctrlKey) {    array.push("ctrl");  };  if (event.altKey) {    array.push("alt");  };  if (event.metaKey) {    array.push("meta");  };};function showArray() {  var str = array.toString();  var newP = document.createElement("p");  newP.appendChild(document.createTextNode(str));  document.body.appendChild(newP);  timing = setTimeout(showArray, 1000);}

5、相關元素

event.relatedTarget與event.target；

relatedTarget屬性提供了相關元素的資訊。這個屬性只對於mouseover和mouseout事件才包含值；對於其他事件的值則是null；IE8之前的版本不支援relatedTarget屬性，在mouseover事件觸發時，IE的fromElement屬性中儲存了相關元素；在mouseout事件觸發時，IE的toElement屬性中儲存著相關元素。

如：

var dot = document.getElementById("dot");dot.onmouseout = function (){  console.log("mouse out from" + event.target.tagName + "to" + event.relatedTarget.tagName);};

如：

function getRelatedTarget() {  if (event.ralatedTarget) {    return event.relatedTarget;  } else if (event.toElement) {    return event.toElement;  } else if (event.fromElement) {    return event.fromElement;  } else {    return null;  }}

四、滑鼠按鍵

1、button屬性

DOM的event.button屬性有三個值：0為主要滑鼠按鍵、1為中間滑鼠按鍵、2為次滑鼠按鍵。在常規設定中，主要滑鼠按鍵就是滑鼠左鍵；次滑鼠按鍵就是滑鼠右鍵。

IE8及之前的版本也提供了button屬性，但這個屬性的值與DOM的button屬性有很大差異：

• 0：沒有按下滑鼠按鍵；
  
• 1：主要滑鼠按鍵；
  
• 2：次滑鼠按鍵；
  
• 3：同步選取主要滑鼠按鍵和次滑鼠按鍵；
  
• 4：中間滑鼠按鍵；
  
• 5：同步選取主要滑鼠按鍵和中間滑鼠按鍵；
  
• 6：同步選取次滑鼠按鍵和中間滑鼠按鍵；
  
• 7：同步選取三個滑鼠按鍵
  

相容版：

function getButton() {  if (document.implementation.hasFeature("MouseEvents", "2.0")) {    return event.button;  } else {    switch (event.button) {      case 0:      case 1:      case 3:      case 5:      case 7:        return 0;      case 2:      case 6:        return 2;      case 4:        return 1;    }  }}

另外，如果要屏蔽滑鼠右鍵，應該使用：

document.oncontextmenu = function(event) {  // if (window.event) {  //   event = window.event;  // }  // try {  //   var the = event.srcElement;  //   if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {  //     return false;  //   }  //   return true;  // } catch (e) {  //   return false;  // }  return false;}

這個事件是HTML5定義的，以後再討論

2、更多的事件資訊

detail屬性

對於滑鼠事件來說，detail包含了一個數值，表示在給定位置上發生了多少次單擊（一次mousedown和一次mouseup），次數從1開始計數，如果mousedown和mouseup之間移動了位置，detail會被重設0，如果單擊間隔太長也會被重設為0.

3、滑鼠滾輪事件

mousewheel事件和wheelDelta屬性

在垂直放向上滾動頁面時，就會觸發mousewheel，event對象裡面的wheelDelta屬性則表示當使用者向前滾動滾輪時，wheelDelta是120的倍數；當向後滾動滾輪時，wheelDelta是-120的倍數。如：

var clientHeight = document.documentElement.clientHeight;var divs = document.getElementsByTagName("div");for (var i = 0; i < divs.length; i++) {  divs[i].style.height = clientHeight + "px";};window.onmousewheel = function () {  if (event.wheelDelta <= -120) {    window.scrollBy(0,clientHeight);  }else if(event.wheelDelta >= 120){    window.scrollBy(0,-clientHeight);  };}

另外，在Opera 9.5之前的版本中，wheelDelta值的加號或減號是顛倒的。

此外，Firefox支援一個名為DOMMouseScroll的類似事件，也是在滑鼠滾動滾輪時除法。有關滑鼠滾輪的資訊儲存在detail屬性中。向前滾動這個屬性的值為-3的倍數，向後滾動，這個屬性的值是3的倍數。

通用版：

function getWheelDelta() {  if (event.wheelDelta) {    return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);  } else {    return -event.detail * 40;  };}

4、觸摸裝置

iOS和Android裝置中：

• 不支援dblclick；
• 輕擊可單擊元素會觸發mousemove；如果此操作會導致內容變化，將不再有其他事件發聲；如果螢幕沒有發生變化，那麼依次發生mousedown、mouseup和click事件；
• mousemove事件也會觸發mouseover和mouseout事件；
• 兩個手指操作會觸發mousewheel和scroll；
  

5、無障礙性問題

• 使用click事件執行代碼；
• 不要使用onmouseover向使用者顯示新的資訊；
• 不要使用dblclick執行重要的操作；

以上就是本文的全部內容，希望對大家的學習有所協助。

您可能感興趣的文章:

• javascript 滑鼠滾輪事件
• javascript 滑鼠事件總結
• js中滑鼠滾輪事件詳解(firefox多瀏覽器)
• js 相容多瀏覽器的斷行符號和滑鼠焦時間點事件代碼(IE6/7/8,firefox,chrome)
• JS滑鼠事件大全 推薦收藏
• javascript監聽滑鼠滾輪事件淺析
• js控制滑鼠事件移動及移出效果顯示