檢測單擊了哪個元素

Question

簡而言之，我將一個本地HTML頁面加載到asp.net中其他Web表單中的div中。

JQuery的：

<script>
    $(function () {
        $("#includedContent").load("../HtmlHolder/index.html");
    });

</script>  

HTML：

  <div id="includedContent" class="WebHolder" style="width: 450px; height: 300px; border: 1px solid #808080; margin: 0px auto; overflow-y: scroll;"></div>

現在我想通過下面的腳本點擊它們來獲取元素的類名：

<script>
    $(document).ready(function () {
        $('.WebHolder').on("click", "*", function (e) {

            alert("Class :" + $(this).attr("class"));
        });
    });
</script>  

我的問題是，當我點擊任何元素時，此代碼會提醒此類名稱並且它是父級！

怎么解決？

注意：元素不是特定對象，可能是輸入或按鈕或textarea或....

Answer 1

您應該使用e.target （ 使用此作為選擇器 ）而不是this （ 因為它是父級 ）

alert("Class :" + $(e.target).attr("class"));

要避免對父級執行操作：您可以this與e.target進行比較，以驗證它是否為父級。

if( this !== e.target )

演示代碼：

 $('div').on('click', function(e){ if( this !== e.target ) alert( 'Class is '+ $(e.target).attr('class') ); }); 

 div{ background: #fe7a15; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> I am the parent, Clicking me will not get you an alert but headers does, because they are my children. <br /><br /> <h1 class="class-header-child-one">Header 1</h1> <h2 class="class-header-child-two">Header 2</h2> </div> 

Answer 2

在事件處理程序中使用event.stopPropagation() 。

$('.WebHolder').on("click", "*", function (e) {

    alert("Class :" + $(this).attr("class"));
    e.stopPropagation();
});

這將防止事件冒泡DOM樹。

演示：

 $(document.body).on('click', '*', function(e) { alert($(this).text()); e.stopPropagation(); }); 

 div { background: red; } div > div { background: orange; } div > div > div { background: yellow; } div > div > div > div { background: gray; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div>Main <div>1 <div>11</div> <div>12</div> <div>13 <div>131</div> </div> </div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>