Question

I have a table rows which uses javascript to open certain menus when clicked based on selected row. I also have an <a href> tag used to open the link or redirect somewhere else.

The problem is, when I clicked the <a href> link, the table row is also executed which opens the menus.

its PHP/Javascript language.

This is the script for table tr:

echo "<tr onclick=\"enableDialogs(1)\";>";

For the <a> link in the same row:

echo "<td><a href='?folder={$filedir}'>{$list}</a></td>";

Question is, how do i avoid overlap of both on click function?

Answer 1

You have a classic case of event bubbling. As some of the comments suggest take advantage of the callback from the subscribed element, reference the first argument, and stop the bubbling from the tag. Assume myElement is 1 DOM node of your <a>.

myElement.addEventListener("click", function(e) {
   e.stopPropagation();
}, false);

Of course the jQuery callback works the same

$(myElement).click(function(e) {
    e.stopPropagation();
});