表格行tr中的按钮，当单击按钮时仅执行按钮操作

Question

I'm trying to have a button inside a row.

when clicking the button I want it to do A.

and when clicking the row I want it to do 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/

function stopEvent(ev) {
  ev.stopPropagation();
  alert("event propagation halted.");
}
function stopPropagation(elem) {
  elem = document.getElementById("row1");
  elem.addEventListener("click", stopEvent, true);
}

Answer 1

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:

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 .

Answer 2

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.

---

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>