Question

我有一个包含如下数据的表：

<table>
 <tr onclick="window.location='download.php?id=1'">
  <td>Program 1<br/>Short Description 1 (<a onclick="$.popup.show('Install Instructions', 'Instructions pulled from DB here')">Instructions</a>)</td>
  <td>Added by user and date/time here<td>
  <td>Filesize here<td>
  <td><a href="edit.php?id=1">Edit</a> - <a href="delete.php?id=1">Delete</a><td>
 </tr>
 (repeat TRs for more programs pulled from DB)
</table>

我遇到的问题是，当您单击（说明）链接时，它应该弹出一个包含说明的窗口。它确实做到了，但它也触发了TR的onclick。所以我得到一瞬间的弹出窗口，然后转到download.php。

有没有我可以阻止它触发TR的onclick？最好使用jquery，但我也不介意简单的javascript解决方案。

Answer 1

基本上，您需要使用event.cancelBubble（对于IE）或event.stopPropagation（）（对于其他人）停止propagation of events。 solution given from quirksmode（我以前用过的）就是做这样的事情：

<script type="text/javascript">
var instructions = function(e) {
    // Get the correct event in a cross-browser manner, then stop bubbling/propagation.
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();

    // Do what you want now
    $.popup.show('Install Instructions', 'Instructions pulled from DB here');
}
</script>

然后你的脚本会调用它：

<td>Program 1<br/>Short Description 1 (<a onclick="instructions(event)">Instructions</a>)</td>

（当然，你可以把它全部内联，但这是一个血腥的混乱。）

您可能还会发现this question有启发性。

Answer 2

stopPropagation是你想要的。

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

Answer 3

你可以写

onclick="false"

并使用事件模型级别2（ie中的attachEvent或其他浏览器中的addEventListener）添加事件。如果你使用jquery，你也可以jquery绑定（'click'）。

jquery，在父元素上阻止onclick = window.location

3 个答案: