3

I have a table. Each row is a link to some page(for example - google.com) which called by js "onClick window.open" method:

<tr  class='tr' onClick="win=window.open('http://google.com');win.focus();" >

In the last column I have an anchor href link to other page (for example - jsfiddle):

<td class='td'><a href = "http://jsfiddle.net">JSFiddle</a></td>

If I click on anchor link it's opened, but also opened the first page called by onClick.

I've found a reverse issue:

How can I disable HREF if onclick is executed?

We can disable href by adding "return false" to onClick Event.

Is it possible to prevent onClick executing if anchor link was clicked?

Here is my demo: Fiddle

Community
  • 1
  • 1
Vladimir
  • 429
  • 7
  • 21

3 Answers3

2

I would recommend you to change approach a little. Inline event handlers are never good idea. Consider this code.

HTML:

<table id="table">
    <tr data-url="http://google.com">
        <td>Content</td>
        <td>Content</td>
        <td><a href="http://jsfiddle.net">JSFiddle</a></td>
    </tr>
    ...
</table>

JS:

var table = document.getElementById('table');

table.addEventListener('click', function(e) {

    var target = e.target;
    if (target.tagName == 'A') {
        return false;
    }

    if (target.tagName == 'TD') {
        var win = window.open(target.parentNode.getAttribute('data-url'));
        win.focus();
    }
}, false);

Demo: http://jsfiddle.net/CqRE9/

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • Thank you, I see it works in demo but somehow not works on my real site, I will investigate it. – Vladimir Feb 11 '14 at 11:51
  • I found my problem - it works if we add js script after table output and not works contrariwise... I always used to add all js scripts in the start of page(in the head tags). Why it doesn't work in my way? – Vladimir Feb 11 '14 at 12:44
  • Because if you add script before table, it will execute before DOM is loaded. Hence by the time of execution there is no table in the document. – dfsq Feb 11 '14 at 12:56
  • Could you please help, how it should be changed if I attach script from external src? I suppose it something like `window.onload=table.addEventListener ...` but I can't find correct way – Vladimir Feb 11 '14 at 13:51
  • Just include script tag before closing `

    ` tag.

     – dfsq Feb 11 '14 at 13:54
  • Yes, it works... but it's not very good way to add a new js file in a lot of files... Maybe possible to have a src script in a head of document and specify "onload" method for it? – Vladimir Feb 11 '14 at 14:30
  • Why can't use add src script before closing body? – dfsq Feb 11 '14 at 14:31
  • I just don't like to have multiple "includes" in a different places, it's hard to maintain afterwards. Anyway, thank you, if I find another way, I'll post here. – Vladimir Feb 11 '14 at 14:46
  • Then you should use `DOMContentLoaded` or `window.onload` events. – dfsq Feb 11 '14 at 14:47
  • Yes, if I place your code in function `window.onload = function(){ your script };` all works fine even if script included in the head of the page. That's what I needed! Please update your answer or I can, if you don't mind. – Vladimir Feb 11 '14 at 15:05
1

Yes it's possible!

$("tr").on("click", function(){ 
 $(this).attr("onClick", false); 
});

Demo: fiddle

Farkhat Mikhalko
  • 3,565
  • 3
  • 23
  • 37
0

This is an old question, but it showed up first in my search results and I suspect the suggested answer is a little more complicated than it needs to be. I found that if I add onclick="event.stopPropagation()" to my anchor, only the anchor is invoked, and the parent element's click handler is not. Works perfectly for my use case.

Joshua
  • 61
  • 1
  • 3