Question

我有一个用PHP回显的HTML表格：

echo '<tr class="notfirst" style="cursor:pointer;" onclick="document.location=\'editinvoice.php?seq='.$result["sequence"].'&inv='.$result["invoice_number"].'\'">
                <td width="20"><input type="checkbox" name="check'.$counter.'" id="check'.$counter.'" onclick=\'add('.$total.', this);\' /></td>
                <td width="150">'.$result["invoice_number"].'</td>
                <td width="250">'.$company.'</td>
                <td width="100">'.$date.'</td>
                <td width="100">&pound;'.$result["total"].'</td>
                <td width="100">&pound;'.$result["total"].'</td>
            </tr>';

所以当你将鼠标悬停在它上面时，会突出显示整行，无论你在哪一行点击它都会打开链接，但当我选中复选框时它也会打开链接 - 我想要停止此

Answer 1

我认为最好从html标记中分离你的javascriptcode。这样你就可以更好地控制它。

在javascript中查看bubbling phases。看看preventdefault 我希望这有帮助

Answer 2

我会使用event.stopPropagation()

这是一个jQuery版本，因为它更容易做，但如果必须的话，你可以在DOM访问中重写它。如果这样做，您还需要为IE＆lt; 9

添加event.cancelBubble=true

$(function() {
  $(".notfirst").on("click",function() {
    location = "editinvoice.php?seq="+$(this).data("seq")+"&inv="+$(this).data("inv");
  });
  $("checkbox[name^=check]).on("click",function(event) {
    event.stopPropagation();
    add($(this).data("total");
  });
});

使用此代码：

echo '<tr class="notfirst" style="cursor:pointer;" data-seq="'.$result["sequence"].'" data-inv="'.$result["invoice_number"].'">
  <td width="20"><input type="checkbox" name="check'.$counter.'" id="check'.$counter.'" data-total="'.$total.'" /></td>
            <td width="150">'.$result["invoice_number"].'</td>
            <td width="250">'.$company.'</td>
            <td width="100">'.$date.'</td>
            <td width="100">&pound;'.$result["total"].'</td>
            <td width="100">&pound;'.$result["total"].'</td>
        </tr>';

带有链接未检查的HTML表格行复选框

2 个答案: