如何禁用父元素的onclick元素

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

您需要停止事件冒泡 。

注意

使其不顯眼

<tr id="tr1">
   <td>Some data</td>
   <td>Some data</td>
   <td><button id="bt1">Click</button></td>  <!--I want to disable the clickevent of the <tr> here -->
</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和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 個解決方案

解決方案1
3 2011-01-12 07:00:23

解決方案2
2 2011-01-12 06:48:53

解決方案3
2 2011-01-12 12:52:37

如何禁用父元素的onclick元素

問題描述

3 個解決方案

解決方案1 3 2011-01-12 07:00:23

解決方案2 2 2011-01-12 06:48:53

解決方案3 2 2011-01-12 12:52:37

解決方案1
3 2011-01-12 07:00:23

解決方案2
2 2011-01-12 06:48:53

解決方案3
2 2011-01-12 12:52:37