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放在内容中不是一个选项

这是一个小提琴：https://jsfiddle.net/Zoker/ss12zeqk/

Answer 1

我建议使用一个处理此功能的功能。

＆＃13;

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

＆＃13;

table {
  width: 100%;
}

tr:hover {
  cursor: pointer;
}

＆＃13;

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

＆＃13;

使用事件触发器，您可以查看触发事件的内容并在必要时继续操作。我在复选框td中添加了一个类，以便更轻松地验证并确保您没有单击该复选框。

Answer 2

jquery解决方案：

$('tr.clickable').click(function() {
location.href='https://www.w3schools.com'
});

$('tr.clickable input[type="checkbox"]').click(function(e) {
  e.stopPropagation();
});

$('tr.clickable').click(function() {
location.href='https://www.w3schools.com'
});

$('tr.clickable input[type="checkbox"]').click(function(e) {
  e.stopPropagation();
});

table {
  width: 100%;
}

tr:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <tr class="clickable">
    <td>
      <div>
        Lore ipsum
      </div>
    </td>
    <td>More content</td>
    <td>
      <input type="checkbox" name="check" value="1">
    </td>
  </tr>
</table>

从onclick中排除子复选框

2 个答案: