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