避免来自父母的onclick

Question

以下示例是否有办法：

<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>

单击CANCEL链接时不执行do_something（）和do_something_else（）。

我只需要执行do_something_else（）

谢谢

Answer 1

有两种选择：

• 最低限度变更

• 现代之路

最小变化

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

＆＃13;

＆＃13;

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;
  }
}

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

现代方式

如今，使用onXYZ属性相当老套。相反，请考虑以现代方式连接处理程序，从而为您提供stopPropagation()函数：

＆＃13;

＆＃13;

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");
}

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

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