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 /

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

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/sebababi/YJ6eG/

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

• javascript

• check my answer out and let me know if you had any problem. – Mehran Hatami Commented Jan 25, 2014 at 16:05

2 Answers 2

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.

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>