3

我有这样的功能：

$(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>

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

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

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

我怎样才能得到第一个id？单击按钮或单击标签的 id 或我页面上的任何内容。

4

4 回答 4

5

您需要停止事件在 DOM 树上的传播，这样父项就不会看到相同的事件。在 jQuery 中，你可以这样做e.stopPropagation()：

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

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

$(document).click(function(e) {
    alert(e.target.id);                
});
于 2012-11-18T21:51:49.233 回答
3

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

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

方法防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

于 2012-11-18T21:51:27.193 回答
2

事件冒泡，因此它将显示它冒泡的每个元素的 id。

使用该stopPropagation方法防止事件冒泡：

$(document).ready(function () {
  $("*").click(function (e) {             
    e.stopPropagation();
    alert($(this).attr('id').toString());                
  });
});
于 2012-11-18T21:52:59.117 回答
0

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

$("*").click()使用所有选择器 ("*")。当使用all 选择器(*) 时，它会将该事件附加到页面上的每个元素。除非您有理由为页面上的每个元素处理单击事件（可能，但极不可能），否则使用这种方法并不理想（性能下降、不良做法、过于复杂）。

更好的方法是将点击事件分配给单个元素（一种网络标准）。

所以，如果给定这种情况

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

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

于 2012-11-19T00:05:13.877 回答