点击事件抛发与按钮状态的关系验证这个主要是我研究react合成事件时，产生了这个疑惑： JS原生的事件抛发方法dispa

这个主要是我研究react合成事件时，产生了这个疑惑： JS原生的事件抛发方法dispatchEvent在任何时候都生效吗？ 自己验证一下，将结果分享给大家（只作为记录，不具有参考性）

先放结论：只有元素设置属性disabled="disabled"，事件抛发才会被禁止，其他情况均不影响点击事件抛发

按钮状态：	能否事件抛发	能否鼠标触发
原始状态	√	√
display：none	√	×
visibility：hidden	√	×
pointer-events:none	√	×
被其他元素覆盖	√	×
页面隐藏	√	×
脱离可视区域	√	×
disabled="disabled"	×	×

几个需要注意的是：

pointer-events:none只能禁止用户点击，不影响事件抛发
display：none虽然将元素从render tree从移除，却不影响事件的抛发
禁止事件抛发的唯一方法：disabled：disabled（据我所知）

一、按钮的不同状态对事件抛发的影响

1.原始状态

按钮未加任何属性，未被遮盖。此时，按钮的点击事件可抛发，可被鼠标点击触发在这里插入图片描述

2.按钮 display：none

点击事件依然被抛发在这里插入图片描述

3.按钮 visibility：hidden

点击事件依然被抛发在这里插入图片描述

4.按钮被其他定位元素完全覆盖

使用其他元素完全覆盖按钮的情况下，鼠标已经无法触发点击事件，但点击事件抛发依然成功在这里插入图片描述

改变覆盖物的透明度，结果依旧 ↓。在这里插入图片描述

5.页面被隐藏（切到其他页面了）

使用定时器6秒后抛发点击事件，刷新页面，切到其他页面，6秒后切回来，事件依然被抛发

6.按钮移出窗口

使用定位将按钮移动到可视区域以外，点击事件依然能抛发在这里插入图片描述

7.按钮 disabled="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>

后记：这是我以前在CSDN发的博客，id：小拇指按不到ctrl。