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

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

I have links like this:
click
click

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

Solutions/Answers:

Solution 1:

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:

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:

Try this:

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

Solution 4:

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

Solution 5:

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:

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