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


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

event对象中 target和currentTarget 属

  • 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;这个是触发对象

 

 

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM