js判断点击事件是被调用还是点击DOM对象触发

Posted yylzx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js判断点击事件是被调用还是点击DOM对象触发相关的知识,希望对你有一定的参考价值。

在说明这个问题之前,我们先来了解一下:

  • event.target返回触发事件的元素

  • event.currentTarget返回绑定事件的元素,即DOM对象

想要更具体了解这两个属性的朋友可以打开这个链接查看   https://www.cnblogs.com/yewenxiang/p/6171411.html

在下面的例子中,我们来看这个问题:

    <body>
        <div id="ips" style="border:1px solid red">
            <p>点我</p>
            <p>点我</p>
            <p>点我</p>
            <p>点我</p>
        </div>
        <div id="clicks" style="border:1px solid black;margin-top: 50px;">
            点我触发上面div的点击事件
        </div>
    </body>
    <script src="http://www.jq22.com/jquery/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        $("#ips").click(function(event) {
            var tar = event.target.nodeName.toLowerCase();
            var tagName = event.currentTarget.nodeName.toLowerCase();
            console.log("你点击了:" + tar);
            console.log("点击事件的DOM对象:" + tagName);
            //如果是点击#ips这个div 打印出来的结果为:
            //你点击了:p
            //点击事件的DOM对象:div
            //
            //你点击了:div
            //点击事件的DOM对象:div
            //这两种情况(第二种情况出现在点击了div中的margin区域,又没有点击到p标签的时候)
            //
            //如果是点击#clicks调用这个点击函数会打印:
            //你点击了:div
            //点击事件的DOM对象:div
            //只有这一种情况
        });
        $("#clicks").click(function(enent) {
            $("#ips").click();
        });
    </script>

通过例子我们可以看出,通过对比currentarget和target是否相等,我们可以判断出点击事件是被调用还是被点击

//el1 = event.currentTarget; 这个是事件的DOM对象
//el2 = event.target;这个是触发对象

 

 

 


以上是关于js判断点击事件是被调用还是点击DOM对象触发的主要内容,如果未能解决你的问题,请参考以下文章

js提交数据时需判断是点击事件还是回车键

js DOM事件

js 原生事件委托

mui中判断是点击还是滑动

js原生模拟点击事件

关于jQuery中动态生成的点击事件触发两次的讨论