javascript - 中的 onclick 事件

Question

这个问题已经有答案了:

Child element click event trigger the parent click event (5 个回答)

已关闭 5 年前。

以下代码的问题是当我单击 select 时标签，它触发 <tr> onclick事件，如何解决？

<table>
  <tr onclick="window.location = 'http://example.com'">
    <td>...</td>
    <td>...</td>
    <td>...</td>
    <td>
      <select>
             <option>...</option>
             <option>...</option>
          </select>
    </td>
  </tr>
</table>

Answer 1

这就是事件冒泡。您必须确保事件不会冒泡。只需在 <select> 中添加此事件即可的onclick事件。

<select onclick="event.stopPropagation(); event.stopImmediatePropagation();">

<div onclick="console.log('Clicked DIV.');">
  <select onclick="event.stopPropagation(); event.stopImmediatePropagation();">
    <option></option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

<table>
  <tr onclick="console.log('Clicked TR.');">
    <td>
      <select onclick="event.stopPropagation(); event.stopImmediatePropagation();">
        <option></option>
        <option>1</option>
        <option>2</option>
      </select>
    </td>
  </tr>
</table>