HTML DOM cancelable Event屬性用法及代碼示例

HTML DOM 可取消事件屬性與 HTML 事件相關聯，因為 JavaScript 可以對這些事件做出反應。可取消事件屬性返回布爾值 true 或 false，指示事件是否可以取消。

用法

以下是可取消事件屬性的語法 -

event.cancelable

示例

讓我們看一個可取消事件屬性的例子 -

<!DOCTYPE html>
<html>
<body>
<p>Hover over the button below to find out if onmouseover is cancellable event or not</p>
<button onmouseover="cancelFunction(event)">CLICK IT</button>
<p id="Sample"></p>
<script>
   function cancelFunction(event) {
      var x = event.cancelable;
      if(x==true)
         document.getElementById("Sample").innerHTML = "The onmouseover event is cancellable";
      else
         document.getElementById("Sample").innerHTML = "The onmouseover event is not
      cancellable";

   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

將鼠標懸停在“單擊它”按鈕上 -

我們首先創建了一個按鈕 CLICK IT，它將在鼠標懸停時將 ommouseover 事件對象傳遞給 cancelFunction(event) 方法。

<button onmouseover="cancelFunction(event)">CLICK IT</button>

cancelFunction(event) 方法檢查傳遞的事件對象的 event.cancelable 值並將其分配給變量 x。使用條件語句，我們檢查 event.cancellable 是否返回 true 或 false，然後在 id 等於 “Sample” 的段落標記中顯示合適的消息 -

function cancelFunction(event) {
   var x = event.cancelable;
   if(x==true)
      document.getElementById("Sample").innerHTML = "The onmouseover event is cancellable";
   else
      document.getElementById("Sample").innerHTML = "The onmouseover event is not cancellable";
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM cancelable Event Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。