4

その中に多くのコンポーネントを含む要素があります。この要素ボックスを呼び出しましょう。ボックスの中には、さまざまな要素、画像、テキスト、ボタンがあります。

例： http：//jsfiddle.net/roman_khrystyny​​ch/ FSCRH /

HTML：

    <div id="container">
        <div class="box">
            <div class="button">Click</div>    
        </div>
    </div>

jQuery：

    $('#container').on("click", ".box", function(){
        alert('box'); //only when anything in box except button
    });

    $('#container').on("click", ".button", function(){
        alert('button'); //only when button clicked
    });

問題は、ボタンをクリックすると、ボックス要素もそのアクションをアクティブにすることです。基本的に、ボタンをクリックしても通常のボックスアクションは発生せず、代わりにボタンアクションが発生するという例外が必要です。助言がありますか？

4

2 に答える 2

6

あなたが話しているのは、イベントバブリングです。子要素をクリックすると、DOM ツリーの最上部までのすべての親でクリック イベントがトリガーされます。

stopPropagation() は dom ツリーのバブリングをキャンセルします

これを試して：

  $('#container').on("click", ".button", function(e){
        e.stopPropagation()
        alert('button'); //only when button clicked
    });
于 2013-03-12T18:15:38.720 に答える
2

jqueryにはそのための機能があります。http://api.jquery.com/event.stopPropagation/

stopPropagation();

クリックイベントのバブリングを停止します。

http://jsfiddle.net/honk1/FSCRH/1/

于 2013-03-12T18:13:17.210 に答える