点击事件抛发与按钮状态的关系

最新推荐文章于 2021-05-13 10:38:30 发布

小拇指按不到ctrl

最新推荐文章于 2021-05-13 10:38:30 发布

阅读量194

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44350171/article/details/113242731

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

结论：只有元素设置属性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>

小拇指按不到ctrl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击事件抛发与按钮状态的关系

结论：只有元素设置属性disabled=“disabled”，抛发才会被禁止，其他情况均不影响点击事件抛发按钮状态：原始状态display：nonevisibility：hiddenpointer-events:none被覆盖页面隐藏溢出窗口disabled=“disabled”事件抛发√√√√√√√×鼠标触发√×××××××目录一、按钮的不同状态对事件抛发的影响1.原始状态2.按钮 display：none3.按钮 vis
复制链接

扫一扫

专栏目录