click事件造成的条件 - Eric

时间 2019-12-12

标签 click 事件造成条件 eric 繁體版

原文原文链接

鼠标点击后触发click事件的必要条件 - Eric

场景html

一、页面上有不少输入框（发货单号），鼠标离开文本框会向后台发送请求保存发货单号，请求时页面会出现loading遮罩。
二、页面上有一个【发货】按钮，点击发货按钮会向后台获取须要发货的数据（包含发货单号）测试

问题code

在输入框中填写完发货单号，直接点击发货按钮时，有时候没法触发发货事件(click事件)，有时候能够，why？htm

探索事件

要想知道真正的缘由，咱们要先说一下两个事件的前后顺序，咱们知道当点击页面其余地方时才会触发 失焦事件(即onmousedown事件)，因此咱们点击发货按钮时必定触发了失焦事件，那为何有时候没法触发发货（click）事件呢，接下来一下来实验。ip

测试须要的代码it

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            div {
                width: 300px;
                height: 300px;
                border: 1px solid #c33;
            }

            #loading {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.3)
            }
        </style>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="loading"></div>

        <script>
            // 测试点击事件的过程
            box1.onclick = () => {
                console.log(1);
            }

            // 测试右击
            box2.onclick = () => {
                console.log('鼠标右击无效')
            }

            // 显示覆盖
            box1.onmousedown = () => {
                loading.style.display = 'block';
            }
            loading.onmouseup = () => {
                loading.style.display = 'none';
            }
        </script>
    </body>
</html>

本身能够根据代码实验一下。io

实验结果console

一、鼠标按下后不会当即触发click事件，须要鼠标抬起。
二、右击不会触发click事件。
三、鼠标抬起时若是不在按下时的元素上，不会触发click事件。后台

总结
click事件的触发条件：在A元素上按下鼠标左键，在A元素上抬起鼠标左键。

解密
如今小伙伴们应该知道为何有时候不会触发click事件了吧，若是在loading遮罩出现前，咱们已经松开鼠标（触发click事件），是能够触发【发货】事件的，若是在loading出现后鼠标才松开，那么至关于咱们的实验结果3，是不会触发点击事件的。

感受有帮助别忘了点赞哦！