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

参考までに、これはこれを行うには非常に非効率的な方法です。イベントのバブリングを利用し、ドキュメントでバブリングされたクリック イベントをキャッチし、この 1 か所だけでそれらを調べる単一のイベント ハンドラーを使用して、このようにするとよいでしょう。

$(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 セレクター(*) を使用すると、そのイベントがページ上のすべての要素にアタッチされます。ページ上のすべての要素に対してクリック イベントを処理する理由がない限り (可能ですが、ほとんどありません)、この方法を使用することは理想的ではありません (パフォーマンス ヒット、悪い習慣、過度に複雑)。

より良いアプローチは、クリック イベントを個々の要素に割り当てることです (一種の Web 標準)。

したがって、このシナリオが与えられた場合

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

2 つのイベント ハンドラ (ボタンごとに 1 つ) を使用する

$(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 に答える