Question

我有一张桌子。这是它的示例代码。

<table>
<thead>
 <tr>
   <td>filename</td>
   <td>file size</td>
   <td>date</td>
 </tr>
</thead>
<tbody>
 <tr>
 <td>
  <input type="checkbox">
  file 1
 </td>
 <td>
  1MB
 </td>
 <td>
  13-01-12
 </td>
 </tr>
 <tr>
 <td>
  <input type="checkbox">
  file 2
 </td>
 <td>
  2MB
 </td>
 <td>
  23-12-17
 </td>
 </tr>
</tbody>
</table>

我在每一行都有一个复选框输入以选择表中的多个tr。我还需要重定向到onclick文件的详细信息视图。所以，这是我的JS代码

$(document).on("click", "table tbody tr", function() {
  window.location = $(this).data('href');
});

现在，每当我尝试单击复选框时，tr都会被单击。因此，该页面将被重定向到另一个页面。但是选择不起作用。单击选择时如何防止页面重定向。

预先感谢

更新：：

我想实现gmail中的收件箱邮件之类的功能。每当我单击任何邮件时，它都会被打开。如果我选中此复选框，则将选择相应的邮件。

Answer 1

单击一个元素时，它会冒泡直到DOM中附加了click事件的最高点。为了防止您的复选框触发<tr>上的点击事件，您需要停止“冒泡”。

将此添加到您的代码中：

$('input:checkbox').on("click", function(e){
    e.stopPropagation();
});

来源：How do I prevent a parent's onclick event from firing when a child anchor is clicked?

Answer 2

由于该复选框是表格行的子级，因此当您单击该复选框时，单击事件将在DOM上传播。这意味着它也会冒泡到其所有父元素，并且还会触发在那些父元素上定义的任何单击事件。

因此，当您单击复选框时，也会执行放置在表行上的click事件。

幸运的是，您可以通过处理复选框的click事件并运行stopPropagation方法来关闭此功能，以关闭这种“冒泡”行为。

演示：

$(document).on("click", "table tbody tr", function() {
  alert("click"); //just for testing
  //window.location = $(this).data('href');
});
$(document).on("click", 'input[type="checkbox"]', function(event) {
  event.stopPropagation();
});

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #cccccc;
  padding 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>filename</td>
      <td>file size</td>
      <td>date</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox"> file 1
      </td>
      <td>
        1MB
      </td>
      <td>
        13-01-12
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"> file 2
      </td>
      <td>
        2MB
      </td>
      <td>
        23-12-17
      </td>
    </tr>
  </tbody>
</table>

Answer 3

使用Event.Target

  
  
  document.querySelector("table")
.addEventListener("click" , event=>{
  if(( event.target  ).tagName == "TD" || ( event.target  ).tagName == "TR" ){
      alert("redirect")
  }
  if(( event.target  ).tagName == "INPUT" ){
      alert("select")
  }
})

<table>
<thead>
 <tr>
   <td>filename</td>
   <td>file size</td>
   <td>date</td>
 </tr>
</thead>
<tbody>
 <tr>
 <td>
  <input type="checkbox">
  file 1
 </td>
 <td>
  1MB
 </td>
 <td>
  13-01-12
 </td>
 </tr>
 <tr>
 <td>
  <input type="checkbox">
  file 2
 </td>
 <td>
  2MB
 </td>
 <td>
  23-12-17
 </td>
 </tr>
</tbody>
</table>

Answer 4

尝试以下代码：

<table>
<thead>
 <tr>
   <td>filename</td>
   <td>file size</td>
   <td>date</td>
 </tr>
</thead>
<tbody>
 <tr>
 <td>
  <input type="checkbox">
  <a href="https://yahoo.com"  style="text-decoration:none;">file 1</a>
 </td>
 <td>
  1MB
 </td>
 <td>
  13-01-12
 </td>
 </tr>
 <tr>
 <td>
  <input type="checkbox">
  <a href="https://google.com"  style="text-decoration:none;">file 2</a>
 </td>
 <td>
  2MB
 </td>
 <td>
  23-12-17
 </td>
 </tr>
</tbody>
</table>

选择多个tr并单击一次tr即可重定向

4 个答案: