Javascript 表行tr内的按钮，单击按钮时仅执行按钮操作

我试着在一排里面装一个按钮

单击按钮时，我希望它执行一个

单击行时，我希望它执行B

我试着停止传播，但在某一点上它是有效的，但我不知道我没有什么，我无法设法使它再次工作

也许有更好的方法可以做到这一点

我有一把小提琴

---

我更改了您的代码，如下所示：

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

---

这是您的更新。

虽然您的代码不起作用，但如果它在某些情况下起作用，则在您终止第1行上的事件时，它将只允许单击一次。请使用下面给定的代码以获得所需的结果

---

HTML:-

---

这是第1行，如果单击它，它应该会做些什么
如果你点击我，我应该做些不同的事情
这是第二排
点击我

---

javascript:-

---

函数BTN1调用（e）{
警报（“btn 1已单击”）；
e、 停止传播（）；
}
函数btn2Call（e）{
警报（“btn 2已点击”）；
e、 停止传播（）；
}

查看我的答案，如果您有任何问题，请告诉我。非常感谢，Mehran，它非常有效。只有一个问题，“stopPropagation（）；”前面的“ev”是什么意思？我从另一个代码中得到了这一点。每当触发一个事件时，浏览器都会创建一个事件对象，让您获得有关该事件的所有信息，例如，如果您有一个与鼠标相关的单击事件，浏览器会创建一个MouseEvent，其中包含有关触发事件的所有信息、位置、，实际目标DOM元素等。

ev

这里是一个MouseEvent，其中包含有关实际单击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">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>

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

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

<script>

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

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