我有一张桌子。这是它的示例代码。
<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中实现像Inbox邮件这样的功能。每当我点击任何邮件时,它都会被打开。如果选中该复选框,将选择相应的邮件。
由于复选框是表格行的子项,因此当您单击该复选框时,click事件将沿DOM传播。这意味着它也会冒泡到其所有父元素,并且还会触发在这些父元素上定义的任何点击事件。
因此,当您单击复选框时,也会执行放置在表行上的单击事件。
幸运的是,你可以通过处理复选框的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>
单击某个元素时,它会冒泡到DOM中具有附加点击事件的最高点。为防止您的复选框触发<tr>
上的click事件,您需要停止'冒泡'。
将其添加到您的代码中:
$('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?
使用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>
请尝试以下代码:
<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>