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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。