Event.PreventDefault() doesn't always work

Question

I just wanted to make a quick userscript to prevent websites from opening links in new tabs, so I can choose when to do so. Oh boy.

I wanted to use plain javascript; I think it's enough for such an easy task. I was doing all my tests in Quora because that's where I decided I wanted to code that little snippet.

Well, nothing worked. I started simple and went increasing the craziness of my code in light of the failure: the link kept opening no matter how many preventDefault()'s, return false's, prevent[*]Propagation(), eventListeners... Even modifying the dom to strip the a element from its target="_blank".

In the end, I bit my tongue and tried jQuery with this little snippet:

$("a").click(function(event){
        event.preventDefault();
        alert("Was preventDefault() called: " + event.isDefaultPrevented());
    });

But that didn't do any good either. So I gave up. I then realized that the code seemed to work on other websites. Except on Quora.com. A regular Quora link looks like this:

<a href="http://thewebsite.to/go"
    rel="noopener nofollow"
    target="_blank"
    onclick="return Q.openUrl(this);"
    class="external_link"
    data-qt-tooltip="thewebsite.to"
    data-tooltip="attached">
    Link text
</a>

There's plenty of crap there, for sure, but I've been stripping down attributes one by one until the bare bones: <a href="http://thewebsite.to/go"></a> and still doesn't work. Best of all is that even though the link opens, event.isDefaultPrevented() returns true!

Why does that happen and how can I fix it?

That has an inline event handler. Is that dynamically created? — Jai, Feb 28 '17 at 09:15

Sojtin · Answer 1 · 2017-02-28T09:25:36.810

0

You are sure that links getting selected? Maybe this help:

$(document).on('click', 'a', function(e) {
    e.preventDefault();
});

edited Feb 28 '17 at 09:25

answered Feb 28 '17 at 09:17

Sojtin

2,714
2
18
32

$(document).on('click','a', function(e) { is more specific and fast. – A.T. Feb 28 '17 at 09:21
@A.T. i changed it – Sojtin Feb 28 '17 at 09:26

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

The problem is the onclick definition in the a tag. It creates a new on click event listener before your code does anything.

To prevent it you will have to play around with the event order, see this previous question: How to order events bound with jQuery

edited May 23 '17 at 12:09

Community

1
1

answered Feb 28 '17 at 09:38

leafblight

33
4

Event.PreventDefault() doesn't always work

2 Answers2