Question

我正试图在一排内设一个按钮。

单击按钮时我希望它执行A。

当点击该行时，我希望它做B。

我试图阻止传播，但有一次它正在发挥作用，但我不知道我没有做什么，我无法让它再次发挥作用。

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

我有一个小提琴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。

Answer 2

你的代码虽然无法正常工作。如果它在某些情况下工作，它只允许单击你杀死 row1 行上的事件。使用下面给出的代码来获得所需的结果。

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

<script>

function btn1Call(e) {
    alert('btn 1 clicked');
    e.stopPropagation();
}

function btn2Call(e) {
    alert('btn 2 clicked');
    e.stopPropagation();
}
</script>

表格行tr内的按钮，单击按钮时只执行按钮操作

2 个答案: