Access event to call preventdefault from custom function originating from onclick attribute of tag

JavascriptJqueryHtml

Javascript Problem Overview


I have links like this:

<a href="#" onclick="myfunc({a:1, b:'hi'})" />click</a>
<a href="#" onclick="myfunc({a:3, b:'jo'})" />click</a>

And I would like to do a preventDefault() inside myfunc(), because a # will be added in the address bar when clicking on the link (without doing return false; or href='javascript:void(0);')

Is this possible? Can I get the event inside myfunc()

Javascript Solutions


Solution 1 - Javascript

I believe you can pass in event into the function inline which will be the event object for the raised event in W3C compliant browsers (i.e. older versions of IE will still require detection inside of your event handler function to look at window.event).

A quick example.

function sayHi(e) {
   e.preventDefault();
   alert("hi");
}

<a href="http://google.co.uk" onclick="sayHi(event);">Click to say Hi</a>

  1. Run it as is and notice that the link does no redirect to Google after the alert.
  2. Then, change the event passed into the onclick handler to something else like e, click run, then notice that the redirection does take place after the alert (the result pane goes white, demonstrating a redirect).

Solution 2 - Javascript

The simplest solution simply is:

<a href="#" onclick="event.preventDefault(); myfunc({a:1, b:'hi'});" />click</a>

It's actually a good way of doing cache busting for documents with a fallback for no JS enabled browsers (no cache busting if no JS)

<a onclick="
if(event.preventDefault) event.preventDefault(); else event.returnValue = false;
window.location = 'http://www.domain.com/docs/thingy.pdf?cachebuster=' + 
Math.round(new Date().getTime() / 1000);" 
href="http://www.domain.com/docs/thingy.pdf">

If JavaScript is enabled, it opens the PDF with a cache busting query string, if not it just opens the PDF.

Solution 3 - Javascript

Try this:

<script>
    $("a").click(function(event) {
        event.preventDefault(); 
    });
</script>

Solution 4 - Javascript

<script type="text/javascript">
$('a').click(function(){
   return false;
});
<script>

Solution 5 - Javascript

Add a unique class to the links and a javascript that prevents default on links with this class:

<a href="#" class="prevent-default" 
   onclick="$('.comment .hidden').toggle();">Show comments</a>

<script>
  $(document).ready(function(){

    $("a.prevent-default").click(function(event) {
         event.preventDefault(); 
          });
  });
</script>

Solution 6 - Javascript

Can you not just remove the href attribute from the a tag?

Solution 7 - Javascript

I think when we use onClick we want to do something different than default. So, for all your links with onClick:

$("a[onClick]").on("click", function(e) {
  return e.preventDefault();
});

Solution 8 - Javascript

Simple!

onclick="blabla(); return false"

Solution 9 - Javascript

You can access the event from onclick like this:

<button onclick="yourFunc(event);">go</button>

and at your javascript function, my advice is adding that first line statement as:

function yourFunc(e) {
    e = e ? e : event;
}

then use everywhere e as event variable

Solution 10 - Javascript

Without any JS library or jQuery. To open a nice popup window if possible. Fails safely to normal link open.

<a href="https://acme.com/" onclick="onclick="openNewWindow(event, this.href);">...</a>

And the helper function:

function openNewWindow(event, location) {
  if (event.preventDefault && event.stopImmediatePropagation) { 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
  } else {
    event.returnValue = false; 
  }
  window.open(location, 'targetWindow', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=450');
}

Solution 11 - Javascript

e.preventDefault(); from https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

Or have return false from your method.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOmuView Question on Stackoverflow
Solution 1 - JavascriptRuss CamView Answer on Stackoverflow
Solution 2 - JavascriptJuLoView Answer on Stackoverflow
Solution 3 - JavascriptSuave NtiView Answer on Stackoverflow
Solution 4 - JavascriptAram MkrtchyanView Answer on Stackoverflow
Solution 5 - JavascriptaaandreView Answer on Stackoverflow
Solution 6 - JavascriptLeigh CiechanowskiView Answer on Stackoverflow
Solution 7 - JavascriptRonanView Answer on Stackoverflow
Solution 8 - JavascriptJakeView Answer on Stackoverflow
Solution 9 - JavascriptgdarcanView Answer on Stackoverflow
Solution 10 - JavascriptMartin VečeřaView Answer on Stackoverflow
Solution 11 - Javascriptrahul singh ChauhanView Answer on Stackoverflow