Append `return false;` to `onClick` event handler in JavaScript

Question

Main Problem : Get rid of # when user clicks on anchor tag. I found a solution for this, which is adding return false; in onClick handler

Secondary Problem : My current code looks like this

<a href="#" onclick="javaScript:toggleDisplay();" title="Some Title">
    @ViewBag.TotalRecords
</a>

And according to solution I got, I want it like this

<a href="#" onclick="javaScript:toggleDisplay();return false;" title="Some Title">
    @ViewBag.TotalRecords
</a>

How can I append return false; to my javaScript function call? I can do it manually, but is there any easy way to do this. I am using jQuery?
Is there any other way to get rid of #, without modifying the current markup?

EDIT

@ViewBag.TotalRecords: This is a MVC3 ASP.Net thing, but it is not related to the question, hence I didn't put it in the tags.

Thanks

onclick="javaScript:toggleDisplay();" It is not an error, but the javaScript: prefix is probably not doing what you think it is. — Thilo
– Thilo, Commented Feb 10, 2012 at 5:03
@Shaheer, if I use my first code snippet, my toggleDisplay() function works properly, but I get # in my Query String. If I do toggleDisplay(); return false; it is not there. — Amar Palsapure
– Amar Palsapure, Commented Feb 10, 2012 at 5:05
@AmarPalsapure perhaps you can write return false in your function call? — Shaheer
– Shaheer, Commented Feb 10, 2012 at 5:10
Using unobtrusive JavaScript would solve your problem and make your application much more maintainable — Phil
– Phil, Commented Feb 10, 2012 at 5:10

Ian Henry · Accepted Answer · 2012-02-10 05:09:36Z

4

You really shouldn't use an a tag for this -- it's not acting as a link; it's acting as a javascript button. You can use CSS to style it to look like a link if you want to, but semantically it is not an anchor. Consider using <span class="toggle-display-button"></span> or similar instead. This will also get rid of the unwanted side effect of scrolling to the top of the page and appending # to the URL that you're experiencing now.

It's also bad practice to put javascript in your markup like that. You can bind the event directly to the element using jQuery's .click method; this is cleaner and more flexible should you decide to change how the page looks or works in the future.

answered Feb 10, 2012 at 5:09

Ian Henry

22.4k4 gold badges54 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Phil Over a year ago

Why <span> and not <button>?

Amar Palsapure Over a year ago

I can do lots of stuff, but almost everything (90%) will end up in modifying my markup or javascript function, which I don't want. So if you have anything in that 10%, it will help me.

Ian Henry Over a year ago

@Phil - It's just harder to make a button look like a link in CSS (assuming that's desired). span was the lazy man's choice.

Ian Henry Over a year ago

@Amar - You want a solution that doesn't involve modifying your javascript or markup? What exactly are you hoping to modify?

Phil Over a year ago

@AmarPalsapure Implementing an unobtrusive solution would require you to rewrite most / all of your HTML and JavaScript but you'd be happier for it

|

rkw · Accepted Answer · 2012-02-10 06:55:56Z

3

If you cannot alter your html, or the way you hook up the click event, you can always block the click from going through (which is what causes the url to be updated with #):

$(document).on('click', 'a', function(e) {
    if ('#' == $(this).attr('href'))
        e.preventDefault();
});

You really should refactor though, 18 pages is not much. With a good IDE, it should be quick.

answered Feb 10, 2012 at 6:55

rkw

7,2974 gold badges28 silver badges39 bronze badges

1 Comment

Amar Palsapure Over a year ago

+1 This is closes and prefect solution, I got. Thanks. And yes, I could have done the editing stuff, but now at least I learn something new :) Because of this I learned closest, document.addEventListener etc.

Community · Accepted Answer · 2017-05-23 12:11:23Z

Thanks Phil, as I said got something out of it. Got not one but two solutions.

If I add following code to js File, all click handlers are handled (will make it specific for anchor later on)

Using plain JavaScript (Unobtrusive JavaScript)

document.addEventListener('click', function (e) {
   e.preventDefault();
   return false;
});

Using jQuery

$(document).click(function (e) {
    e.preventDefault();
    return false;
});

The jQuery Solution is little different than the one suggested by elclanrs, in the sense, if I do $('a').click(function(e){ e.preventDefault(); });, it works for anchor, but I modify my DOM and add new anchor to it, click on this anchor causes # in query string.

EDIT

The above solution causes all the clicks to go through the handler, even which I don't want. Because of this normal anchor with href as url were not working, so this is the working solution

$("a").live("click", function (e) {
   if ($(this).attr("href") != "#") return;
   e.preventDefault();
   return false;
});

Hope this helps some one else.

elclanrs · Accepted Answer · 2012-02-10 05:01:05Z

2

Are you sure you know how to use jQuery? # means empty link, you don't get rid of it...

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

answered Feb 10, 2012 at 5:01

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

7 Comments

Amar Palsapure Over a year ago

I am not using jQuery to bind my javascript function.

Phil Over a year ago

You can also simply use $("a").click(function(){return false;});

Thilo Over a year ago

how does the new jQuery click handler work together with the existing onclick in the markup (that he does not want to change)?

elclanrs Over a year ago

If you're using jQuery, why would you want to use onclick?

Thilo Over a year ago

I would not, but OP says he is not using jQuery to bind the functions, and he does not want to (or cannot?) change the markup.

|

Collectives™ on Stack Overflow

Append `return false;` to `onClick` event handler in JavaScript

4 Answers 4

8 Comments

1 Comment

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

8 Comments

1 Comment

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related