HTML DOM cancelable 事件属性


HTML DOM cancelable 事件属性与 HTML 事件相关,因为 JavaScript 可以对这些事件作出响应。cancelable 事件属性返回一个布尔值 (true 或 false),表示该事件是否可以取消。

语法

cancelable 事件属性采用如下的语法 −

event.cancelable

示例

下面我们来看一下 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 按钮上 −

我们首先创建一个按钮 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";
}

更新于: 2019 年 8 月 7 日

120 次浏览

开启您的 职业生涯

完成课程获取认证

开始学习
广告