在說明這個問題之前,我們先來了解一下:
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;這個是觸發對象
