CODEWITHSUNDEEP
javascriptjqueryhtml
Mikkel Madsen
Mikkel Madsen

Reputation: 347

Stop javascript execution on specific links

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>

Upvotes: 1

Views: 1584

Answers (3)

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

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>

Upvotes: 2

user2182349
user2182349

Reputation: 9782

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.

Upvotes: 0

EJTH
EJTH

Reputation: 2218

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;
});

Upvotes: 0

Related Questions