Preventing href in from executing via Javascript

Question

So I have this following code in my HTML:

<li class="" id="toolbar_section"><a id="toolbar_section_child" href="#foobar" onclick="return toolbarSetSection(this);" data-toggle="checkpoint">foobar</a></li>

And written in my Javascript is:

<script type="text/javascript">
   function toolbarSetSection(event){
       //some logic which leads to
       return false;
   };
</script>

However, the href still executes... I have checked many similar topics with answers like event.preventDefault(); but they don't help me either.

ooops I did event.preventDefault() but all it threw was a typeerror — Cira, Jul 14 '17 at 22:13
Do you ever need to use the `href`? Because if you don't, just use a ` instead of an ``. — Toastrackenigma, Jul 14 '17 at 22:15
Yeah the javascript and jquery logic handles whether or not to disable the HREF from triggering. — Cira, Jul 14 '17 at 22:16
@ZivWeissman I personally don't really care about the points lol, I'm still a student so I guess learning currently is more important to me. — Cira, Jul 14 '17 at 22:32
@Cira ... so if you're learning then what you _really_ should do is stop using inline `onclick="anything"` handlers and learn to use [addEventListener()](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) and the jQuery (or other package) equivalents instead. [This SO answer](https://stackoverflow.com/a/6348597/17300) is a good intro (but ignore `attachEvent`) — Stephen P, Jul 15 '17 at 00:45

score 1 · Answer 1 · answered Jul 14 '17 at 22:15

1

return false should usually work, but maybe there is an error in your toolbarSetSection function.

Calling event.preventDefault() should usually work, too. However in your case you expect the function to be called with event as first parameter, while your HTML code calls onclick="return toolbarSetSection(this);" with the link object as first parameter. Maybe you wanted to call toolbarSetSection(event); instead.

answered Jul 14 '17 at 22:15

Stephan

2,028
16
19

As far as I am aware there is no error as the logic is performing completely fine and the web console is not showing any errors. as for toolbarSetSection(event); it doesn't work as well. – Cira Jul 14 '17 at 22:20
How do you notice that it didn't work and which browser are you using? – Stephan Jul 14 '17 at 22:56
using Chrome on MacOS atm, it didn't work because it still caused me to be redirected to another section. – Cira Jul 14 '17 at 23:00

score 1 · Accepted Answer · answered Jul 14 '17 at 22:16

1

In your HTML you should change onclick="return toolbarSetSection(this);" to onclick="toolbarSetSection(event);", and then have event.preventDefault(); in your javascript function.

Your full code would be:

<li class="" id="toolbar_section"><a id="toolbar_section_child" href="#foobar" onclick="toolbarSetSection(event);" data-toggle="checkpoint">foobar</a></li>

and

function toolbarSetSection(event) {
    event.preventDefault();
    return false;
};

answered Jul 14 '17 at 22:16

Lasse Sviland

1,479
11
23

Your problem is most likely related to something else. The code here works on its own. Stephan and Travis Acton's solutions do also work. If you post the rest of your code, we might be able to help. – Lasse Sviland Jul 14 '17 at 22:54
Ahhhhhhh alright, I got it, one of the javascripts was clashing with the one I had going on and somehow got conflicted. thanks for helping! – Cira Jul 14 '17 at 22:59

taha · Answer 3 · 2017-07-14T23:13:43.323

0

a better way to get the expected behavior without adding onclick on the tag

<script>
document.getElementById('toolbar_section_child').on('click', function(e){
    e.preventDefault();
})
</script>

Assuming you have a unique id for the a tag.

EDIT for dynamically created elements use event delegation

document.addEventListener('click',function(e){
   /*
   if(e.target && e.target.id == 'toolbar_section_child'){
       e.preventDefault();
   }
   */
   // using a common class name
   if(e.target && e.target.className.split(" ").indexOf("toolbar_section_child") != -1){
       e.preventDefault();
   }
})

edited Jul 14 '17 at 23:13

answered Jul 14 '17 at 22:36

taha

997
9
17

Hmmm, in my current circumstances that would not be very efficient as I'm using embedded ruby to generate elements as the entire page is extremely dynamic. If I were to do this approach, a lot of javascript would be loaded into the page as opposed to just one piece of javascript being loaded with can handle requests from any element. I also want to thank you for taking the time to help me, really appreciated! – Cira Jul 14 '17 at 22:43
@Cira understood :) maybe you can give the `a` tags you want to prevent their default behavior a common class name and set a listener to the click event – taha Jul 14 '17 at 22:51
Oh right, I tried to do it that time but somehow it didn't work and the javascript was only picking up the click which was initially loaded onto the page and not picking up the ones loaded in using AJAX, so I just gave up on that and used onclick haha. – Cira Jul 14 '17 at 22:54

score 0 · Answer 4 · answered Jul 14 '17 at 22:42

0

HTML

<ul>
 <li class="" id="toolbar_section2"><a id="toolbar_section_child" href="#" onclick="toolbarSetSection()"  data-toggle="checkpoint">foobar</a></li>
</ul>

js

function toolbarSetSection()
{
 alert('started');
 event.preventDefault();
 alert('weee');
}

jsfiddle so you cannot say it is not working :) : https://jsfiddle.net/rgoopw18/1/

answered Jul 14 '17 at 22:42

Travis Acton

4,292
2
18
30

Hi, thanks for taking the time to help me, I just tried it out and somehow got through both alerts, then it triggered the href. It's actually not working... :( Now that I think about it, might the data-toggle="checkpoint" be affecting it somehow? – Cira Jul 14 '17 at 22:50
https://jsfiddle.net/rgoopw18/3/ I hcnged the href to go to google and I am pounding on this link now with no redirection. – Travis Acton Jul 14 '17 at 22:54
Ahhhhhhh alright, I got it, one of the javascripts was clashing with the one I had going on and somehow got conflicted. thanks for helping! – Cira Jul 14 '17 at 22:57

Preventing href in from executing via Javascript

4 Answers4