javascript - 表格行 tr 内的按钮，单击按钮时仅执行按钮操作

Question

我想在一行中添加一个按钮。

当点击按钮时，我希望它做 A。

当单击我希望它执行 B 的行时。

我试图停止传播，并且在某一时刻它起作用了，但我不知道我没有做些什么，我无法设法让它再次起作用。

可能有更好的方法来做到这一点。

我有一把 fiddle 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);
}

Answer 1

我这样修改了你的代码:

<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>

和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);

这是您更新的 DEMO .