3

おはようございます、

リストとして表示されるページに一連のボックスがあり、これらのボックス内にクリックできるリンクがいくつかある場合があります。ボックス内のリンクが通常どおり機能するようにしたい (つまり、バブルアップしてデフォルト アクションを実行するか、DOM のさらに上のイベント ハンドラーによって処理される) が、ボックスが他の場所でクリックされた場合は、特定のすべてのボックスを含む「リスト」にアタッチされたイベント ハンドラ。

単純な html 表現

<div class="boxlist">
    <div class="box" data-boxid="1">
        Some text, and possibly a <a href="#">link</a> and another <a href="#">link</a>, and perhaps even a third <a href="#">link</a>.
    </div>
    <div class="box" data-boxid="2">
        Some more text, this time without a link.
    </div>
</div>

動作するはずだと思ったJavaScript。

$(function () {
    $('.boxlist').on('click', '.box :not(a)', function (e) {
        var boxid= $(this).closest('.box').data('boxid');
        console.log('open: ' + boxid);
    });
});

私の予想では、上記の JavaScript は、タグから発生したものではないすべてのクリックを処理する必要があります。ただし、何らかの理由でボックスがクリックされると (ボックス自体またはタグは関係ありません)、このイベントが X 回発生します。ここで、X はボックスのリスト内のタグの総数です。

2 つの質問があります: 1. :not() セレクターのどこが間違っているのでしょうか。2. このシナリオを処理するためのより良い方法はありますか?

助けてくれてありがとう！

4

2 に答える 2

3

linkUsing jQuery :not selector は実際には非常に遅い例です: http://jsperf.com/not-vs-notdasdsad/4そして、単にevent delegationを使用する方が良いです。したがって、この場合、.boxlist のすべてのクリックを追跡したいのですが、ノード タイプをチェックして、アンカーかどうかを確認します。これは一例です。

$(function () {
    $('.boxlist').on('click', function(ev){
        if(ev.target.tagName != "A"){
            // handle box click code
            console.log('box click');
            return false;
        }
        // Otherwise allow event to bubble through.
    });
});

ここにjsfiddleの例があります http://jsfiddle.net/drXmA/

また、コードが機能しないいくつかの理由もあります

.box :not(a)

する必要があります

.box:not(a)

これも機能しない理由は、.box がアンカー タグではないため、アンカー タグである子要素があるためです。コールバックが実行されない場合、.box という名前のアンカー タグは決して見つかりません。.box をアンカー タグに変更すると、コードが実行されなくなります。これは、.box がアンカーであり、.box:not(a) の場合にのみ実行されるためです。

于 2013-03-28T07:46:57.477 に答える
0

私はあなたがこのようなものが欲しいと思います:

$('.boxlist').on('click', '.box:not(a)', function (e) {
   var boxid = $(this).closest('.box').data('boxid');
   console.log('open: ' + boxid);
}).on('click', '.box a', function (e) {
   e.preventDefault().stopPropagation();
});

デモフィドル

デフォルトの動作を停止し、イベントがその親にバブリングするのを停止する方がよいと思います。それを除外するアイテム.on()にチェーンし、デフォルトの動作とイベントバブルを停止します.box<a>e.preventDefault().stopPropagation();

于 2013-03-28T07:52:24.567 に答える