javascript - 从 onclick 中排除子复选框

Question

我有以下 html 代码:

<tr class="clickable" onclick="location.href='https://www.w3schools.com'">
    <td>
        Lore ipsum
    </td>
    <td>More content</td>
    <td><input type="checkbox" name="check" value="1"></td>
</tr>

现在的问题是，当我单击复选框时，它会将我重定向到 onclick 链接。如何从 onclick 函数中排除复选框？

所有行都应该是可点击的，因此不能将 onclick 放在内容上

这是一个 fiddle :https://jsfiddle.net/Zoker/ss12zeqk/

Answer 1

我建议使用一个函数来处理这个问题。

function tr_clicked(event)
{
	var the_class = event.target.className;
  var the_node = event.target.nodeName;

  if (the_node !== "INPUT" && the_class !== "checkbox")
	{
  	alert("I'm going elsewhere");
  }
}

table {
  width: 100%;
}

tr:hover {
  cursor: pointer;
}

<table border="1">
  <tr class="clickable" onclick="tr_clicked(event)">
    <td>
      <div>
        Lore ipsum
      </div>
    </td>
    <td class="checkbox">
      <input type="checkbox" name="check" value="1">
    </td>
  </tr>
</table>

使用事件触发器，您可以查看是什么触发了事件并在必要时继续。我向复选框 td 添加了一个类，只是为了更容易验证并确保您没有单击该复选框。