如果我单击复选框，试图阻止 jQuery 触发表 tr onclick 事件答案

【问题标题】：trying to stop jQuery from firing table tr onclick event if I click a checkbox如果我单击复选框，试图阻止 jQuery 触发表 tr onclick 事件
【发布时间】：2015-11-17 21:27:52
【问题描述】：

我有一个表格，每行都有一个复选框。我为单击移动到另一个页面创建了一个事件处理程序，但是如果我单击了复选框，我想阻止它移动。以下代码是我所拥有的：

表格布局

echo '<tr class="unread"><td><label class="fancy-checkbox"><input type="checkbox"><span>&nbsp;</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>

【问题讨论】：

明确一点，这是行不通的。重定向仍然触发！
您能否显示实际生成的 HTML 而不是 PHP 脚本代码。另外，正如您所知，像这样回显 HTML 确实是不明智的。你应该研究一下 PHP 的模板功能。
尝试event.stopPropagation() 停止触发其他元素的事件。
我感觉你的 CSS 隐藏了你的复选框，然后你点击了一个标签。 console.log(event.target) 显示什么？
console.log 显示 ::before" "

标签： javascript jquery html checkbox

【解决方案1】：

试试这个：

$( 'table tr input[type="checkbox"]' ).on( 'click', function( event ) {
    event.stopPropagation();
} );

之后你可以在table tr绑定点击，因为复选框点击会在触发后停止

【讨论】：

应该不需要。
@epascarello “应该不需要”什么？
因为 OPs 代码运行正确。还有一个问题。

【解决方案2】：

代码应该完全按照它的编写方式工作，但是标签上的类和布局表明复选框不是你要检查的，所以 if 检查会失败。

所以事件要么是标签，要么是跨度，而不是输入。

if ( !$(event.target).closest(".fancy-checkbox").length) {

【讨论】：

我刚才试过了，没有任何变化。它仍然控制台记录跨度，我取消了重定向行的注释并且仍然得到相同的结果:-(
啊啊啊我太傻了……我在里面输入了.type！现在应该可以工作了。

【解决方案3】：

您可能正在寻找：

event.stopPropagation();

【讨论】：

【解决方案4】：

尝试将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>

【讨论】：

【解决方案5】：

我认为该事件仍在触发，因为复选框位于表格 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>

【讨论】：