1

私は管理するために二重のイベントを手に入れました。2 つのイベントはどちらも「クリック」であり、jquery で処理されます。html は次のとおりです。

 <div class="siteMap"  style="width:23%;">
            <h5>Divisione Anticontraffazione</h5>
            <span class="menufooter">
            <span class="link1"><a href="#scheda1">Introduzione</a></span><br>
            <span class="link2"><a href="#scheda2">Filosofia</a></span><br>
            <span class="link3"><a href="#scheda3">Negozio online</a></span></span><br>
        </div>

次に、menufooter スパン内とすべてのリンク スパン内で発生するクリック イベントがあります。コードは次のようになります。

$(document).ready(function() {
    $('span.menufooter').click(function() { 
        //my code here
    });
    $("span.link1").click(function() {
       //my code here
    });
});

イベント キャプチャ アクションが必要です。スパン menufooter をクリックすると、スパン link1 をクリックする前にイベントが発生する必要があります。この時点で、2 つのイベントはいずれも起動していません。ヒントはありますか？

4

4 に答える 4

4

火事だけのイベントはどうですか.menufooter

$(document).ready(function() {
    $('span.menufooter').click(function(e) { 
        //my code here 1

        // Capture Event Propagation
        if ( $("span .link1").find(e.target).length>0 ){
           //my code here 2
        };
    });
});

http://jsfiddle.net/9QLtG/

于 2013-12-20T15:36:18.690 に答える
1

クリックがバブリングするのを防ぎ、親要素のクリックをトリガーして、そのハンドラーにあるものが最初に実行されるようにすることができます（非同期でない限り）

$(document).ready(function () {
    $('.menufooter').click(function () {
        // fires before ....
    });

    $("span.link1").click(function (e) {
        e.stopPropagation();
        $('.menufooter').trigger('click');
        // .... this fires, as it's triggered above
    });
});

フィドル

于 2013-12-20T14:57:16.977 に答える
0

ラッパーをリッスンする1クリックリスナーがあります。イベントのターゲットをチェックして、実際にリンクをクリックしたかどうかを確認し、それに応じてコードを実行できます。

例えば：

$(document).ready(function() {

    $('.container').click(function(e) {

        // Perform action when they clicked in the main wrapper,
        // regardless of whether or not it was a link.
        console.log("I clicked in the wrapper...");

        if ($(e.target).hasClass('link')) {
           // Perform action if they clicked on a link.   
           console.log("...but more specifically, on a link.");
        }
    });

});

これを示すフィドルを次に示します: http://jsfiddle.net/WaYFr/

于 2013-12-20T15:03:17.293 に答える