Question

我有一张像tr一样的桌子

<tr onclick="doprocess1()">
   <td>Some data</td>
   <td>Some data</td>
   <td><button onclick="doprocess2()"</td>  <!--I want to disable the clickevent of the <tr> here -->
</tr>

如何实现这一目标？

Answer 1

您需要停止event bubbling。

注意的

将其设为unobtrusive

<tr id="tr1"> <td>Some data</td> <td>Some data</td> <td><button id="bt1">Click</button></td>  </tr> $(function(){ $("#tr1").click(function(){ }); $("#bt1").click(function(e){ e.stopPropagation(); }); });

Answer 2

<td><button onclick="doprocess2(event);"</td>

 function doprocess2(evt) {

    evt.stopPropagation();
    evt.preventDefault();

    // your existing code goes here
}

适用于Firefox，Chrome和IE9。不确定“事件”对象未通过的旧版IE。（改用window.event）。

Answer 3

有几种方法可以做到这一点。在您的情况下，最简单的可能是以下内容：

像这样定义doprocess2：

function doprocess2(e) {
    e.stopPropagation && e.stopPropagation() || (e.cancelBubble = true);
    ...
}

并将其称为：

onclick="doprocess2(event);"

这适用于所有现代浏览器以及ie6，ie7＆amp; IE8

这是一个可行的例子：

<html>
<head>
<script>
function doprocess1() { alert('tr'); }
function doprocess2(e) {
    e.stopPropagation && e.stopPropagation() || (e.cancelBubble = true);
    alert('td');
}
</script>
</head>
<body>
<table>
<tr onclick="doprocess1();">
    <td>click tr</td>
    <td><button onclick="doprocess2(event);">click td only</button></td>
</tr>
</table>
</body>
</html>

如何禁用父元素的onclick元素

3 个答案: