Exclude Button From Event Listener OnClick

Question

Really simple jquery question here that I have yet to resolve. I have the following html table

<table id="table-1">
    <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td>
            <button id="btn-1" value="Go"></button>
        </td>
    </tr>
</table>

I have the following event listener for when the table row is clicked

$("table-1 tr").on(
   'click',
    function(e){
       if(button was clicked){ 
           //do some stuff 
       } else {
           //do different stuff
       }
    }
);

I'd like this event listener to fire whenever the table row is selected, except for when the clicked item is my button. I've been trying to use :not and .not(), but no luck. Any ideas?

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation — Jan, Sep 11 '15 at 17:53
possible duplicate of [jquery stop child triggering parent event](http://stackoverflow.com/questions/2364629/jquery-stop-child-triggering-parent-event) — Jan, Sep 11 '15 at 17:53

score 3 · Answer 1 · answered Sep 11 '15 at 17:53

3

Use event.stopPropagation(), to prevent event bubbling to the parent elements.

$('#btn-1').click(function(event){
    event.stopPropagation();
})

answered Sep 11 '15 at 17:53

rrk

15,677
4
29
45

score 3 · Accepted Answer · answered Sep 11 '15 at 17:58

3

Based off your example where you want to catch the element type.

$("#table-1 tr").on('click', function (e) {
    var elementType = $(e.target).prop('nodeName');
    if (elementType == 'BUTTON') {
        console.log('buttonClick');
    } else {
        console.log(elementType);
    };
});

http://jsfiddle.net/ymy9cn71/

answered Sep 11 '15 at 17:58

Sean Wessell

3,490
1
12
20

This was the best answer to my question & implementation, I actually went with `if(document.activeElement.tagName === 'BUTTON') { //do stuff }` – Clay Banks Sep 11 '15 at 18:22

score 1 · Answer 3 · answered Sep 11 '15 at 18:02

What if you set up an event listener on the button specifically? The most specific rule should apply. So if you click on the row then the row event will fire, if you click on the button then the button event will fire FIRST and then the parent will run. So, you could use a simple variable to check whether the button was checked.

Var gContext;

$("#btn-1"). on('click', function() { gContext = true });


$("table-1 tr").on(
   'click',
     function(e){
        if(button was clicke$("table-1 tr").on(
         'click',
         function(e){
               if(gContext === true){ 
               //do some stuff 
               } else {
              //do different stuff
          }
     }
  );d){ 
           //do some stuff 
        } else {
             //do different stuff
        }
      }
   );

did this on my phone, hope it formats correctly.

score 1 · Answer 4 · answered Sep 11 '15 at 18:29

The following code checks the tag name of the event target to know which part of the tr was clicked.

$('table').on('click', 'tr', function (e) {
  var i = $('table tr').index(this);
  var tag = e.target.tagName.toLowerCase();
  if (tag === 'button') {
    alert('go #' + i);
  }
  else {
    alert('select row #' + i);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td><button>Go</button></td>
    </tr>
    <tr>
        <td>Value 1</td>
        <td>Value 2</td>
        <td><button>Go</button></td>
    </tr>
</table>

Exclude Button From Event Listener OnClick

4 Answers4