如果我点击了一个复选框,试图阻止jQuery触发表tr onclick事件
trying to stop jQuery from firing table tr onclick event if I click a checkbox
我有一个表,每行都有一个复选框。我为点击移动到另一个页面制作了一个事件处理程序,但如果我点击了复选框,我想阻止它移动。以下代码是我所拥有的:
表格布局
echo '<tr class="unread"><td><label class="fancy-checkbox"><input type="checkbox"><span> </span></label></td>';
echo '<td><span class="from">' . $message['message_from_first_name'] . '</span></td>';
echo '<td><span class="title">' . $message['subject'] . '</span> <span class="preview">- ' . strip_tags($message['message_preview']) . '</span></td>';
echo '<td><span class="timestamp">' . $message['datestamp'] . '</span></td>';
echo '<td style="display:none;">' . $message['message_id'] . '</td>';
echo'</tr>';
jQuery
<script>
$('table tr').click(function(event) {
if (event.target.type !== 'checkbox') {
var id = $("td:last-child", this).text();
$.redirect('?action=view-message', {message_id: id});
}
});
</script>
试试这个:
$( 'table tr input[type="checkbox"]' ).on( 'click', function( event ) {
event.stopPropagation();
} );
之后,您可以在table tr
处绑定点击,因为复选框点击将在触发后停止
代码应该完全按照编写的方式工作,但标签和布局上建议作为复选框的类不是您要检查的内容,因此if检查将失败。
因此,事件要么是标签,要么是跨度,而不是输入。
if ( !$(event.target).closest(".fancy-checkbox").length) {
您可能正在寻找:
event.stopPropagation();
尝试将if
条件调整为event.target.type !== 'checkbox' && event.target.tagName !== "label"
$('table tr').click(function(event) {
console.log("checbox")
if (event.target.type !== 'checkbox' && event.target.tagName !== "label") {
console.log(event.target)
// var id = $("td:last-child", this).text();
// $.redirect('?action=view-message', {
// message_id: id
// });
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<label><input type="checkbox" /></label>
</td>
</tr>
</tbody>
</table>
我认为该事件仍在触发,因为复选框在表tr.中
而是将以下onclick事件分配给复选框:
onclick="event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}"
或者您可以将上述内容添加到函数中。在这个例子中,我们称之为"stopevent"。
function stopevent() {
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
}
HTML:
<input type="checkbox" onclick="stopevent()">
我们可以将函数包含在脚本标记中,也可以使用页面中包含的javascript文件,也可以包含在脚本标签中,但使用src属性作为文件位置。
服务器的assets/js/文件夹中的外部文件命名函数示例:
<script type="text/javascript" src="assets/js/functions.js">
或者在页面上:
<script type="text/javascript">
function stopevent() {
event.cancelBubble = true;
if (event.stopPropagation) {
event.stopPropagation();
}
}
</script>
相关文章:
- 在创建对象后附加一个jquery事件
- 将jQuery事件应用于所有类元素
- Jquery事件处理程序仅适用于匿名函数
- 如何在jQuery事件处理程序中存储和重用超时
- 无线电输入更改的jQuery事件未启动
- 我应该/如何清除mousemove JQuery事件侦听器
- 是否可以在jQuery事件中更改Angular范围
- jQuery事件侦听器多次启动
- jQuery 事件处理程序堆叠
- 如何在不删除类似侦听器的情况下从父对象中删除jQuery事件侦听器
- 一个接一个地触发jQuery事件
- 在JQuery事件中查找父元素
- 堆叠jQuery事件(动画)
- 在jquery事件中引用javascript对象
- 动态添加对象的jQuery事件处理程序
- jQuery事件命名空间是否可以包含破折号
- Jquery事件绑定获胜'当作为方法调用时不起作用,但当直接在控制台中调用时会起作用
- 没有为Ajax添加的新元素注册Jquery事件
- 动态创建的DOM元素上的jQuery事件绑定
- jQuery事件未在动态生成的内容上激发