0

このリンクを確認してください： jsfiddleの例

divがクリックされたときに、内部のリンクがクリックイベントをトリガーするようにします。ただし、コンソールには、ブラウザがクラッシュするまでクリックイベントがトリガーされ続けることが示されています。なぜこうなった？そして、解決策は何ですか？

実際のdivには多くのコンテンツが含まれているため、<a>タグがdiv全体をカバーしたり、divを<a>タグ内にラップしたりすることは望ましくありません。この機能は、モバイルデバイスで機能することを目的としています。

4

3 に答える 3

5

すべてのclickイベントで再度呼び出すclickと、再帰が終了することはありません。

クリックハンドラーはdivクラスboxでオンになっているため、これらの内部の何かをクリックすると、でイベントdivが発生します。clickdiv

divリンクをたどるためにをクリックしたいようですか？リンクでをトリガーする代わりに、次のようclickにすることができます。

window.location = $(this).find(".link").attr("href");
于 2013-03-27T14:00:53.870 に答える
2

これを試して。無限ループを停止します。しかし、より良い質問は、なぜこれを行うのかということです。

$(".box").click(function(e){
    console.log("clicked");
    $(this).find(".link").trigger("click");
});

$(".link").click(function(e){
    e.stopPropagation();
});
于 2013-03-27T14:04:15.787 に答える
0

「.link」をクリックすると、そのイベントは親にバブルアップし、最終的には再び「.box」に到達します。したがって、再帰に入ります。これを防ぐために、あなたは次のようなことをすることができます

$(".box").click(function(e){
    if(e.currentTarget == e.target)
    {    
        console.log("clicked");
        $(this).find(".link").trigger("click");
    }
});

e.targetはイベントが発生した要素であり、e.currentTargetはイベントがバインドされた要素です。

もう1つの代替ソリューションは（推奨）、

$(".box").click(function(e){
    console.log("clicked");
    $(this).find(".link").trigger("click");       
});
$(".link").click(function (e)
{
    /*This would prevent a click triggered on ".link" to propagate upto its parent i.e ".box" */
    e.stopPropagation();
});
于 2013-03-27T14:13:45.720 に答える