javascript 表格行 tr 内的按钮，单击按钮时仅执行按钮操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21352529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button inside table row tr, when clicking button only do button action
提问by Sebastian
I'm trying to have a button inside a row.
我试图在一行中有一个按钮。
when clicking the button I want it to do A.
单击按钮时，我希望它执行 A。
and when clicking the row I want it to do B.
当单击该行时，我希望它执行 B.
I tried to stop propagation, and at one point it was working, but I don't know what I didn't and I can't manage to make it work again.
我试图停止传播，并且在某一时刻它起作用了，但我不知道我没有做什么，而且我无法让它再次起作用。
Probably there is a better way to do this.
可能有更好的方法来做到这一点。
I have a fiddle http://jsfiddle.net/sebababi/YJ6eG/
我有一个小提琴http://jsfiddle.net/sebababi/YJ6eG/
function stopEvent(ev) {
ev.stopPropagation();
alert("event propagation halted.");
}
function stopPropagation(elem) {
elem = document.getElementById("row1");
elem.addEventListener("click", stopEvent, true);
}
回答by Mehran Hatami
I changed your code like this:
我像这样改变了你的代码：
<table id="ID_to_Stop">
<tr id="row1" onclick="alert('row 1 clicked');">
<td id="c12">this is row 1, if you click it, it should do something
<button id="btn1">and if you click me I should do something different</button>
</td>
</tr>
<tr id="row2" onclick="alert('row 2 clicked');">
<td id="c22">this is row 2
<button id="btn2">click me</button>
</td>
</tr>
</table>
and the js part:
和 js 部分：
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.addEventListener("click", function (ev) {
alert('btn 1 clicked');
ev.stopPropagation();
}, true);
btn2.addEventListener("click", function (ev) {
alert('btn 2 clicked');
ev.stopPropagation();
}, true);
And this is your updated DEMO.
这是您更新的DEMO。
回答by Vinay Prajapati
Your code is not working although.And if it is working in some case, it will allow only single click as you killed the event on row row1.Use below given code to get desired result.
虽然您的代码不起作用。如果它在某些情况下起作用，则在您杀死row1上的事件时，它只允许单击一次。使用下面给定的代码来获得所需的结果。
HTML:-
HTML:-
<table id="ID_to_Stop">
<tr id="row1" onclick="alert('row 1 clicked');">
<td id="c12">this is row 1, if you click it, it should do something
<button id="btn1" onclick="btn1Call(event);">and if you click me I should do something different</button>
</td>
</tr>
<tr id="row2" onclick="alert('row 2 clicked');">
<td id="c22">this is row 2
<button id="btn2" onclick="btn2Call(event);">click me</button>
</td>
</tr>
javascript : -
javascript : -
<script>
function btn1Call(e) {
alert('btn 1 clicked');
e.stopPropagation();
}
function btn2Call(e) {
alert('btn 2 clicked');
e.stopPropagation();
}
</script>
