在说明这个问题之前,我们先来了解一下:
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对象触发
原文地址:https://www.cnblogs.com/yylzx/p/9609085.html