CODEWITHSUNDEEP
javascriptjqueryhtml
user1985273
user1985273

Reputation: 1967

Stop a anchor from triggering js intended for tr/td

I have an html table which should do two things:

1) Inside the tables i need to display some anchors

2) If clicked anywhere besides the anchor i want it to execute a certain javascript

Here is what i have so far:

<table border="1">
  <tr data-href="test" >
    <td onclick="alert('this should work')" width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td onclick="alert('this should work')" width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td onclick="alert('this should work')" width="100" height="50"><a href="goaway">asdfasdf</a></td>
  </tr>
</table>

$(document).ready(function() {
    $('tr[data-href]').click(function () {
        var $parent = $(this).closest('tr[data-href]');
        alert($parent.data('href'));
    });
});

So when clicked anywhere inside that table my javascript is executed which is fine. The problem is that when i click on the anchor it is also executed which i would like to avoid. How could that be avoided?

JSFiddle: https://jsfiddle.net/o2gxgz9r/35761/

Edit: Actually some of my anchors may have a onclick event so that should still work, just the tr[data-href] action should be explicitly avoided.

Upvotes: 0

Views: 44

Answers (2)

Asons
Asons

Reputation: 87251

As you have more element that has click handlers than just the the anchor a and table row tr, you can use if (e.target == this) to make sure each element type will run its intended code.

With this, this represent the element that the event handler were set on, e.target the element that were clicked on, and when they match you'll know which one that were clicked.

Stack snippet

$(document).ready(function() {
    $('tr[data-href]').click(function (e) {
      if (e.target == this) {
        var $parent = $(this).closest('tr[data-href]');
        alert($parent.data('href'));
      }
    });
    $('tr[data-href] td').click(function (e) {
      if (e.target == this) {
        alert('this should work');
      }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <tr data-href="test" >
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
  </tr>
</table>

With this in mind, and if there will be some cells td that might not have a click handler, you can stop the propagation on them instead, as if, and someone click on such cell, the table row tr handler won't run.

Now, in the tr handler, we need to check so the clicked element is not of type anchor a.

Stack snippet

$(document).ready(function() {
    $('tr[data-href]').click(function (e) {
      if (e.target.tagName.toLowerCase() != 'a') {
        var $parent = $(this).closest('tr[data-href]');
        alert($parent.data('href'));
      }
    });
    $('tr[data-href] td:first-child').click(function (e) {
      if (e.target == this) {
        alert('this should work');
      }
      e.stopPropagation();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table border="1">
  <tr data-href="test" >
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
  </tr>
</table>

If you will have inline script it will be more complicated, where you will need to check in tr handler so it wasn't an anchor a, or a cell td with an onclick attribute, which could look something like this, and add stopPropagation() to those anchors that have a parent td with an inline onclick handler.

Stack snippet

$(document).ready(function() {
    $('tr[data-href]').click(function (e) {
      if (e.target.tagName.toLowerCase() != 'a' && !e.target.hasAttribute('onclick')) {    
        var $parent = $(this).closest('tr[data-href]');
        alert($parent.data('href'));
      }
    });
    $('tr[data-href] td[onclick] a').click(function (e) {
        e.stopPropagation();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr data-href="test" >
    <td onclick="alert('this should work')" width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
    <td width="100" height="50"><a href="goaway">asdfasdf</a></td>
  </tr>
</table>

Upvotes: 1

AboulEinein
AboulEinein

Reputation: 1111

You should use event.stopPropagation() https://api.jquery.com/event.stoppropagation/

JSFiddle: https://jsfiddle.net/o2gxgz9r/35756/

Upvotes: 3

Related Questions