リスト要素内の.click（）がエラーを返します

Question

純粋なテキストまたは内部のリンクがあるリストがあります。リンクが利用可能な場合、リスト要素全体をクリック可能にする必要があります。私はこれを行うときに：

if ($('.link').length) { 
    $('li[data-contains-link]').on('click', function (e) { 
     $('.link').click()  
    }) 
} 

を、それは私にエラーを与える：Uncaught RangeError: Maximum call stack size exceeded

は、これを回避する方法はありますか？

Answer 1

クリックイベント後にクリックイベントを発生させています。おそらく再帰呼び出しです。 li[data-contains-link]が.linkでないことを確認してください。そうしないと、無限ループになります。

Answer 2

$（ 'リンク '）のいずれかの内部$です（' 李[データは、含まれているリンク] '）

または

いくつかの$（' 李[データ-含まれているリンク]'）クラスリンクがあります。

これは、クリックをリッスンしてから、それを自己またはその子の1つ、つまり再帰でループさせます。この属性セレクタli[data-contains-link]は、それが.link要素を持っている親要素であることを述べたよう

$('li[data-contains-link]').on('click', function (e) { 
    $('.link').click();  
}) 

$('.link').on('click', function (e) { 
    e.stopPropagation(); // <---addd it here. 
    console.log('.link elem clicked!!!!');  
}) 

---

：.linkのクリックハンドラでevent.stopPropagation()を追加

Answer 3

してみてください。親要素でクリックイベントをバインドし、子要素のクリックをトリガーすると、再帰呼び出しが行われ、エラーが発生します。キャッチされないRangeError：最大呼び出しスタックサイズがを超えました。

これは、イベントバブルのによるものです。です。 event.stopPropagation()を使用すると、イベントが親要素にバブルアップするのを止めることができます。したがって、親がイベントを受け取らないため、再帰呼び出しはありません。