JavaScript: onclick and return false

Question

I'm using this in my HTML:

 <a href="#" onclick="preload('12345');return false;">Click</a>

It calls the function preload() on an external js-file and works fine so far.

But i have dozens of those links and would like to remove alle those "return false" and put only one directly inside the preload()-function in the js-file.

But it will always be ignored?! Does the "return false" really only work inside the onclick="..."?

Does this answer your question? [What's the effect of adding 'return false' to a click event listener?](https://stackoverflow.com/questions/128923/whats-the-effect-of-adding-return-false-to-a-click-event-listener) — limido, Oct 10 '20 at 20:24

score 12 · Accepted Answer · answered Mar 03 '16 at 20:02

12

function preload () {
    // some code
    return false;
}

<a href="#" onclick="return preload('12345');">Click</a>

or use addEventListener

For example:

<a href="#" class="link">Click</a>
<script type="text/javascript">
    document.querySelector('.link').addEventListener('click', function (e) {
        // some code;

       e.preventDefault();
    }, false);
</script>

answered Mar 03 '16 at 20:02

Dmitriy

3,745
16
24

1

Basically, to explain why it's like this, the contents of the onclick block are a function. Evaluated `false;` is valid (if silly) JavaScript, but basically JavaScript wanted you to actually `return false`. – Compass Mar 03 '16 at 20:19

score 5 · Answer 2 · answered Mar 03 '16 at 20:53

Putting return false; in the inline onclick attribute prevents the default behavior (navigation) from occurring. You can also achieve this by clobbering the onclick attribute in JavaScript (i.e. assigning the .onclick property to be a function that returns false), but that's frowned upon as old-fashioned and potentially harmful (it would overwrite any additional event listeners attached to that event, for example).

The modern way to prevent the <a> element's default click behavior from occurring is simply to call the .preventDefault() method of the triggering event from within the attached event listener. You can attach the listener the standard way, using .addEventListener()

Some examples:

// this works but is not recommended:
document.querySelector(".clobbered").onclick = function() {
  return false;
};

// this doesn't work:
document.querySelector(".attached").addEventListener("click", function() {
  return false;
});

// this is the preferred approach:
document.querySelector(".attachedPreventDefault").addEventListener("click", function(e) {
  e.preventDefault();
});

<a href="/fake" onclick="return false;">If you click me, I don't navigate</a><br/>
<a class="clobbered" href="/fake">If you click me, I don't navigate</a>
<br/>
<a class="attached" href="/fake">If you click me, I navigate</a>
<br/>
<a class="attachedPreventDefault" href="/fake">If you click me, I don't navigate</a>

score 0 · Answer 3 · edited Mar 03 '16 at 21:38

0

I think if you put it into the preload function and in the onclick event just put return false will work. Maybe you've tried this code?

<a href="#" onclick="return preload('12345');">Click</a>

edited Mar 03 '16 at 21:38

vishes_shell

22,409
6
71
81

answered Mar 03 '16 at 20:17

Ömer

1
1

score 0 · Answer 4 · edited Jun 06 '22 at 16:42

0

Try to put the return false clause into the inline function:

<input onclick="yourFunction();return false;">

edited Jun 06 '22 at 16:42

Skatox

4,237
12
42
47

answered Mar 15 '17 at 16:31

Don Wayne

11
2

score -1 · Answer 5 · answered Mar 03 '16 at 20:15

-1

I would maybe suggest not using onClick() and instead using similar jQuery.

answered Mar 03 '16 at 20:15

James Taylor

25
1
7

2

jQuery eats too much kilobytes ;) – Chama Mar 03 '16 at 20:18
Haha. well, I have used onClick() before but was very limited in what I could do. But best of luck, afraid I'm all out of ideas. – James Taylor Mar 03 '16 at 20:45

JavaScript: onclick and return false

5 Answers5

Linked