检测单击了哪个元素

Detect which element is clicked

本文关键字：元素 单击 检测      更新时间：2023-09-26

简而言之，我将本地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>

我的问题是，当我单击任何元素时，此代码会提醒此类名，并且它是父级！

如何解决？

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

你应该使用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>

在事件处理程序中使用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>

相关文章：