javascript - 停止在特定链接上执行 javascript

Question

您好 :) 我有一个脚本，可以在您单击 anchor 时添加淡入淡出效果。

但它针对我所有的 anchor 。是否存在避免从特定链接执行的空白，例如页脚中的“返回顶部”链接。它为该链接添加了效果，并且不要停下来，因为没有目标 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;
        });
    });
});

页面顶部的链接如下所示:

            <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>

Answer 1

使用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>