获取最后点击的项目ID

Question

我有这样的功能:

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

在页面我有这样的事情:

<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);                
});