Stop javascript execution on specific links

Question

Hey there :) I have script that adds fadeIn and fadeOut effects when you click anchors.

But it targets all my anchors. Is there a void to avoid the execution from specifics links, like my "back-to-top" link in the footer. It adds the effect for that link, and don't go to stop, since there is no destination url.

JS:

// Page transitions and preventing FOUC(flash of unstyled content).
jQuery.holdReady(true);
jQuery("body").css("opacity", 0);
jQuery.holdReady(false);
jQuery(function ($) {
    $("body").fadeTo(1500, 1);
    $(document).on("click", "a", function (event) {

        // get the href attribute
        // "this" is still the <a> element here
        var newUrl = $(this).attr("href");

        event.preventDefault();
        $("body").fadeTo(800, 0, function () {

            //here, where you were trying to get the url, "this"
            //points to the animated element, ie body


            // veryfy if the new url exists or is a hash
            if (!newUrl || newUrl[0] === "#") {
                // set that hash
                location.hash = newUrl;
                return;
            }

            //just update the location without fading in at this point
            location = newUrl;

            // prevent the default browser behavior.
            return false;
        });
    });
});

And the link to top of the page looks like this:

            <a class="to-top" href="#masthead">
                <svg class="skull-up">
                    <use xlink:href="#skull"></use>
                </svg>
                <span class="screen-reader-text">Tilbage til top</span>
            </a>

Give a class for required <a> and change ur code as $(".class").on("click", function (event) { — Robert_Junior
– Robert_Junior, Commented May 26, 2015 at 11:25

Bojan Petkovski · Accepted Answer · 2015-05-26 11:29:45Z

2

Use event.stopPropagation();

$(document).on("click", "a", function (event) {
  alert('Clicked on a');  
  return false;
});
$('.to-top').on('click', function(event){
  event.stopPropagation();
  alert('Clicked on a with class "to-top"');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#something">I am a tag</a>

<a href="#something">I am a tag</a>

<a href="#something">I am a tag</a>

<a href="#something">I am a tag</a>

<a href="#something">I am a tag</a>

<a href="#something">I am a tag</a>

<a href="#something">I am a tag</a>

<a href="#something">I am a tag</a>

<a class="to-top" href="#something">I am a tag to top</a>

answered May 26, 2015 at 11:29

Bojan Petkovski

6,9511 gold badge27 silver badges36 bronze badges

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

1 Comment

Mikkel Madsen Over a year ago

Yay, works like a charm :) Learned something new today epic! Thank you.

EJTH · Accepted Answer · 2015-05-26 11:25:11Z

You should move the return false; to the callback function of the click event... Right now you call return false; when the animation is done and that doesnt really do anything!

$(document).on("click", "a", function (event) {

    // get the href attribute
    // "this" is still the <a> element here
    var newUrl = $(this).attr("href");

    event.preventDefault();
    $("body").fadeTo(800, 0, function () {

        //here, where you were trying to get the url, "this"
        //points to the animated element, ie body


        // veryfy if the new url exists or is a hash
        if (!newUrl || newUrl[0] === "#") {
            // set that hash
            location.hash = newUrl;
            return;
        }

        //just update the location without fading in at this point
        location = newUrl;

    });
    // prevent the default browser behavior.
    return false;
});

user2182349 · Accepted Answer · 2015-05-26 11:28:08Z

0

Another approach would be to add a CSS class only on the links you want to execute.

$(document).on("click", "a.do-action", ...

It would also make it easier to see which links are actionable.

If the links aren't supposed to be clicked, you might want to use a different tag.

answered May 26, 2015 at 11:28

user2182349

9,8323 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

Stop javascript execution on specific links

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related