结论:只有元素设置属性disabled=“disabled”,抛发才会被禁止,其他情况均不影响点击事件抛发
按钮状态: | 原始状态 | display:none | visibility:hidden | pointer-events:none | 被覆盖 | 页面隐藏 | 溢出窗口 | disabled=“disabled” |
---|---|---|---|---|---|---|---|---|
事件抛发 | √ | √ | √ | √ | √ | √ | √ | × |
鼠标触发 | √ | × | × | × | × | × | × | × |
目录
一、按钮的不同状态对事件抛发的影响
1.原始状态
按钮未加任何属性,未被遮盖
此时,按钮的点击事件可抛发,可被鼠标点击触发
2.按钮 display:none
点击事件依然被抛发,也只能抛发
3.按钮 visibility:hidden
点击事件依然被抛发
4.按钮被其他定位元素完全覆盖
在被完全覆盖的情况下,使用鼠标已经无法触发点击事件,但点击事件抛发依然成功了
改变覆盖物的透明度,结果依旧 ↓。
5.页面被隐藏(切到其他页面了)
使用定时器6秒后抛发点击事件,刷新页面,切到其他页面,6秒后切回来,事件依然被抛发了
6.按钮溢出窗口
点击事件依然被抛发
7.按钮 disabled=“disabled”----------------------------------------------重点
点击事件终于被禁止抛发了,当然鼠标点击也不能触发了
8.按钮 pointer-events:none
只能禁止用户点击,抛发依然执行了
二、结论:只有元素设置属性disabled=“disabled”,抛发才会被禁止,其他情况均不影响点击事件抛发
三、实验代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div{
background-color: #000;
width: 80px; height: 80px;
/* position: relative; top: -30px; */
}
</style>
</head>
<body>
<button id="btn">点击按钮</button>
<div id="div"></div>
</body>
<script>
var btn=document.querySelector("#btn");
btn.onclick=function(){console.log("点击");}
var newEvent=document.createEvent("MouseEvents");
newEvent.initEvent("click",true,true);
btn.dispatchEvent(newEvent);
</script>
</html>