码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-09-08 15:31:42      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:结果   .com   点击   var   元素   margin   color   查看   body   

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

  • 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对象触发

标签:结果   .com   点击   var   元素   margin   color   查看   body   

原文地址:https://www.cnblogs.com/yylzx/p/9609085.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!