javascript - 入れ子になった HTML 要素での競合するイベント

Question

ネストされたイベントリスナーがあります。まさに彼らは

<tr onclick="function1();">
<td>....</td>
<td onclick="function2();">....</td>
</tr>

Second Cell をクリックすると、function1() ではなく function2() のみが呼び出されます。これを行う方法はありますか？

Answer 1

関数にイベント オブジェクトを渡し、stopPropagation を呼び出してイベントの伝播を停止します。

ライブデモ

<tr onclick="return function1(e);">
  <td>First Td....</td>
 <td onclick="return function2();">second td....</td>
</tr>

function function2(e)
{
  //your statements.
   alert("function2");
   e.stopPropagation();
}

Answer 2

イベントはevent.stopPropagationを使用して停止できます

function(e) {
   var event = e || window.event;
   event.stopPropagation();
}

詳細については、こちらの回答を参照してください:インラインの onclick 属性を使用してイベントの伝播を停止する方法は?