jQueryのclick（）メソッドがDOMクリックメソッド（）と異なる動作をする理由を教えてください。

Question

子要素のclickイベントをシミュレートしてそのクリックイベントをトリガするのに疲れました。その親要素にもclickイベントがあります。まず は、私がいずれかの方法でこれを行うことができると信じていた：

document.getElementById('child').click(); 

やjqueryので

$('#child').click(); 

しかし、私は、後に2つの方法が異なる挙動を示すことがわかりました。

domのメソッドは、期待どおりにクリックイベントを発生させますが、jqueryのメソッドは親要素のクリックイベントを2回発生させます。

ここでは、フィドルの例を示します。 https://jsfiddle.net/5t5jc7ey/

誰でもjqueryが親要素のclickイベントに対して2回発生する理由を説明できますか？

Answer 1

私が結論づけることができるのは、親の最初のクリックは、イベントを呼び出すことによって発生し、2回目は親がデフォルトのクリックイベントをトリガして再びクリックすることです。私はe.preventDefault();

working demo

を使用することによって回避していますデフォルトの動作は、より明確なアイデアのコードが表示されるように：

$('#jquery').click(function() { 
    $('#child').click(function(e){e.preventDefault();}).click(); 
}); 

$('#dom').click(function() { 
    document.getElementById('child').click(); 
}); 

私はもう一度説明しよう：

1.親の最初のクリックイベントは、イベントのバブリングのためにトリガを取得します。

2. 親の2回目のクリックイベントは、ブラウザのデフォルトのアクションによるもので、div自体をクリックすると表示されます。私はe.preventDefault();

を使用して ブラウザのデフォルトの動作を防止していますし、出力にあなたが私のバイオリンで見る親のクリックイベントは、イベントバブリングによるものです。したがって、必要な回答が得られます

Answer 2

トリガは親要素に伝播します。これを防ぐために、イベントの親要素へのバブリングを停止し、親イベントハンドラが実行されないようにするメソッド
event.stopPropagation()を使用できます。使用に、something()なくsomethingElse()をトリガーする#someIdリンクをクリックすると、上記の例では

$('p').click(function(event){ 
    something(); 
}) 
$('#someId').click(function(event){ 
    event.stopPropagation(); 
    somethingElse(); 
}) 

：

HTML：：

<p><a id="someId">Text</a></p> 

JS

この例を見てみましょうevent.stopPropagation()です。

Answer 3

親クリックハンドラにブレークポイント/デバッガコマンドを配置すると、それが表示されます。

最初のものがChromeで次のようになりますイベントの場合です：

j…y.Event {type: "click", timeStamp: 1467985074919, jQuery2240856213100863372: true, isTrigger: 3, namespace: ""…} 
    isTrigger : 3 
    jQuery2240856213100863372 : true 
    namespace : "" 
    result : undefined 
    rnamespace : null 
    target : div#child 
    timeStamp : 1467985074919 
    type : "click" 
    __proto__ : Object 

これはあなたが同じことを行うならば、我々は子供のクリックハンドラで見る同じイベントです。これは、jQueryの「クリック」イベントが吹き出ているようです。

2番目のイベントは次のようになります。

MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, clientY: 0…} 
    altKey : false 
    bubbles : true 
    button : 0 
    buttons : 0 
    cancelBubble : false 
    cancelable : true 
    .... 

これは子供に標的化され、親にフェーズ3（バブリング）になって、より伝統的なマウスクリックのように見えます。これらは、非jqueryトリガーを実行するときに表示されるイベントのタイプです。

私の最高の推測では、このマウスイベントは、jQueryイベントタイプの処理の一部としてブラウザによって自動的に生成されます。子供をクリックします。

申し訳ありませんが、本当に決定的な「回答」ではありませんが、これが役立つことを願っています。