5

ラベル内に埋め込まれている要素（入力、段落、ラジオボタンなどの要素）がいくつかあります。このラベルの親はdivタグです。label内のすべての要素と、labelタグを除く親divに適用されるイベントハンドラー。すべてのイベントハンドラーにもstopPropagationを適用しました。しかし、ラベル内の要素のいずれかをクリックすると、それぞれのイベントハンドラーが呼び出され、stopPropagationが存在するため、呼び出される親イベントハンドラーが制限されます。ここまでは大丈夫です。ただし、問題は、兄弟のイベントハンドラーも呼び出していることです。

 <div class="scroll-content-item" data-pid="1773">
      <label>   
         <span class="custom">Custom</span>
         <input type="text" class="text custom_width" id="cust_width" value="960"/> 
         <p class="para"> This is test para</p>
      </label>
  </div>

jQueryコード

jQuery(document).ready(function($) {

    $('.para').click(function(event) {
        alert("paragraph event ");
        event.stopPropagation();
    });

    $('.custom_width').click(function(event) {

        alert("input custom width event ");
        event.stopPropagation();
    });



    $('.scroll-content-item').click(function(event) {
        alert("parent div event ");
        event.stopPropagation();
    });

});​

段落をクリックすると、そのイベントハンドラーと入力タイプのハンドラーも呼び出されます。クラスcustomでspanをクリックすると、イベントハンドラーがないため、親が最初に呼び出され、後で入力タイプハンドラーが呼び出されます。

p、input、およびそれらすべてをラベル内に埋め込む目的は何であるかなど、あなたが尋ねる可能性のある質問。カスタムinput type="file" を使用して、入力タイプファイルにラベルデータをオーバーレイしていますがonclick、ラベル入力タイプファイルではトリガーする必要があります。同じように、私はラベルの中に要素を埋め込んでいます

を使用しているのに、なぜ2つのイベントハンドラーが呼び出されるのかを知りたいだけですstopPropagation。

参考までに、jsfiddleを作成しました：http：//jsfiddle.net/x7xQg/29/

前もって感謝します

4

1 に答える 1

8

return false;イベントハンドラに a を追加すると解決します。

event.preventDefault();また、すべてのブラウザーをカバーするために追加します。

http://jsfiddle.net/x7xQg/30/

于 2012-09-27T10:43:53.833 に答える