javascript - 检测点击了哪个元素

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>  

我的问题是，当我点击任何元素时，这段代码会提醒这个类名，它是父类!

如何解决？

注意:元素不是特定的对象，它可能是输入或按钮或文本区域或...。

Answer 1

你应该使用 e.target(使用这个作为选择器)而不是 this(因为它是父级)

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

要避免对父级执行操作:您可以比较 this 和 e.target 以验证它是否是父级。 p>

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>