15

問題の簡単な例を次に示します。

<body>
  <button id="parent"  onclick="alert('parent')">
      <span id="child" onclick="alert('child')">Authenticate</span>
  </button>
</body>

Chrome では、これは「子」、「親」の順に警告しますが、IE/FF では「親」のみを取得します。

明らかに、これはいくつかの方法 (ボタンを div に変更する、スパンを削除するなど) で修正できますが、HTML を変更せずにこれを機能させる (つまり、"子" に警告する) 方法があるかどうかを知りたいと思いました。

ありがとう！

PS: JQuery を試してみましたが、同じ動作をします。

4

2 に答える 2

2

@muistooshort が言ったように、他のクリック イベント内でクリック イベントを処理するのは不自然に思えます。また、デザインを再考する必要があると思います。

そうは言っても、メイン コンテナで 1 回のクリック イベントを処理してから、どの要素がクリックのソースであったかを確認できます。

ユースケースを考慮すると、これが進むべき道です。

$('your-button-container').click(function(event){
    console.log(event.originalEvent.srcElement);
});

必要なチェックを行いevent.originalEvent.srcElement、それに応じて行動します。

編集: JQuery を使用しないと、次のようになります。

yourButtonContainer.addEventListener(function(event){
    console.log(event.srcElement);
});
于 2014-10-02T15:14:25.147 に答える
0

一部のユーザーが言及しているように、このようにボタンをネストすることはお勧めできませんが、教育目的のために、次のようにします。

HTML:

<body>
  <button id="parent" onclick="callFn(event, 'parent')">
    <span id="child" onclick="callFn(event, 'child')">Authenticate</span>
  </button>
</body>

JS:

window.callFn = function(evt, type) {
  if (type === 'child') {
    alert(type);
  }
}

JS フィドル: https://jsfiddle.net/4vo3arpf/4/

于 2016-10-19T21:08:48.953 に答える