javascript - 避免 parent 的onclick

是否有以下示例的方法：

<tr id="x" onclick="do_something()">
    <td>Lorem ipsum</td>
    <td>Lorem ipsum</td>
    <td>Lorem ipsum</td>
    <td>
       <a href="javascript:;" onclick="do_something_else()">CANCEL</a>
    </td>
</tr>

单击“取消”链接时，不要同时执行do_something（）和do_something_else（）。

我只需要执行do_something_else（）

谢谢

最佳答案

您有两个选择：


最小变化
现代方式


最小变化

在onXYZ属性中，您的代码实际上位于具有event变量的函数中（直接在大多数浏览器中，在较旧的IE上是全局变量），因此，如果将其传递给函数，则可以在它（如果它具有该功能）或使用stopPropagation如果它不具有（旧IE）：

function do_something() {
  snippet.log("do_something called");
}
function do_something_else(event) {
  snippet.log("do_something_else called");
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
}

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<table>
  <tbody>
    <tr id="x" onclick="do_something()">
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>
        <a href="javascript:;" onclick="do_something_else(event)">CANCEL</a>
      </td>
    </tr>
  </tbody>
</table>

现代方式

如今，使用cancelBubble属性已经过时了。相反，请考虑以一种现代的方式连接处理程序，这为您提供了onXYZ函数：

var x = document.getElementById("x");
x.addEventListener("click", do_something, false);
x.querySelector("a").addEventListener("click", function(e) {
  e.stopPropagation();
  do_something_else();
}, false);

function do_something() {
  snippet.log("do_something called");
}
function do_something_else() {
  snippet.log("do_something_else called");
}

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<table>
  <tbody>
    <tr id="x">
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>Lorem ipsum</td>
      <td>
        <a href="javascript:;">CANCEL</a>
      </td>
    </tr>
  </tbody>
</table>

如果需要支持IE8，this answer为您提供了一个功能来处理IE8不支持stopPropagation()（但确实具有Microsoft特定的前身addEventListener）这一事实。

关于javascript - 避免 parent 的onclick，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26885302/