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