Prevent double clicks on table rows with click event and anchors

Suppose you have a table, for example to show users, and you want the table row to be clickable. If you click the row, you will go to a page that shows user information. Or maybe edit the user. But the last column of your row also has some action buttons that can delete the user, de-activate it, or whatever. So, for example, something like this:

Now, if you add a click event on the tr, when you click the button, both the button and click event will fire. To prevent this, I found this nice stackoverflow post about it. This answer suited my needs better, because I also had used font awesome icons for my anchors.

I did change it a bit however, because you already know the tr element when it’s being clicked on, right? So I ended up with this javascript code, and it seems to work.

So actually the credits go to Augusto, but I just wanted to make a note her, in case I ever forget. The tagline my external memory is for real you know. My internal memory is not always that reliable ;-)

Leave a Reply

Your email address will not be published. Required fields are marked *