Question

我的功能如下：

$(document).ready(function () {
          $("*").click(function () {             
              alert($(this).attr('id').toString());                
        });
    });

在Page i上有类似的东西：

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script language="javascript" src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<div id="div1">Some stuff
    <div id="div2">Some other stuff
    <asp:Button ID="Button1" runat="server" Text="Button" />        
        <div id="div3">More stuff
        <asp:Button ID="Button2" runat="server" Text="Button" />        
        </div>
    </div>        
</div>

如果我点击它可以正常工作，但它会提醒我三次（或更多次）。例如：我点击button2。 Alertbox随button2.id一起出现，然后是div3.id，div2.id等。它显示了该按钮下的所有id。如果我尝试将此id存储到变量，如下所示：

     var storedId = $(this).attr('id').toString();

它存储了最后一个。这意味着我得到了form1的id。

我如何获得第一个ID？点击按钮或点击标签的ID或我页面上的任何内容。

Answer 1

您需要停止DOM树上的事件传播，以便父项看不到相同的事件。在jQuery中，您可以使用e.stopPropagation()：

执行此操作

$("*").click(function(e) {
    alert($(this).attr('id').toString());                
    e.stopPropagation();
});

仅供参考，这是一种非常低效的方法。您可以使用单个事件处理程序更好地执行此操作，该处理程序利用事件冒泡并捕获文档中的冒泡点击事件并在这一处检查它们：

$(document).click(function(e) {
    alert(e.target.id);                
});

Answer 2

您应该使用stopPropagation()停止事件传播：

$("*").click(function(e) {
    alert($(this).attr("id").toString());
    e.stopPropagation();
});

方法阻止事件冒泡DOM树，防止任何父处理程序被通知事件。

Answer 3

事件会冒泡，因此它会显示它冒出的每个元素的ID。

使用stopPropagation method防止事件冒泡：

$(document).ready(function () {
  $("*").click(function (e) {             
    e.stopPropagation();
    alert($(this).attr('id').toString());                
  });
});

Answer 4

其他人回答说，你可以通过停止传播来屏蔽剩下的“无用”事件。 +1，对于这种情况，我认为这是完全正确的。但是，我认为除了使用*选择器之外，还有一种更好的方法可以使用。

$("*").click()使用All Selector ("*")。使用 all选择器（*）时，它会将该事件附加到页面上的每个元素。使用这种方法并不理想（性能命中，不良实践，过于复杂），除非您有理由处理页面上每个元素的点击事件（可能，但极不可能）。

更好的方法是将点击事件分配给各个元素（Web标准的种类）。

所以，如果给出这个场景

<asp:Button ID="Button1" runat="server" Text="Button" />        
<div id="div3">More stuff
    <asp:Button ID="Button2" runat="server" Text="Button" />        
    </div>
</div>

使用两个事件处理程序（每个按钮一个）

$(document).ready(function () {
    $("#Button1").click(function () {             
          alert($(this).attr('id').toString());//note that this.id will also work                
    });
    $("#Button2").click(function () {             
          alert($(this).attr('id').toString());                
    });
});

虽然这种方法需要更多的事件定义，但它通过轻松地为每个元素提供独特的事件处理，更易读的代码以及更好的关注点分离来弥补这一点。

获取最后点击的项目ID

4 个答案: