点击链接时页面淡出，除了mailto：链接答案

【问题标题】：Page fadeOut when links are clicked, except mailto: links点击链接时页面淡出，除了mailto：链接
【发布时间】：2017-12-09 23:14:46
【问题描述】：

在下面的代码中，当点击任何标签时，我正在淡出任何页面，然后淡入新页面。但是，在某些情况下，我们不想让页面在点击时淡出，例如，当标签设置为通过target="_blank" 从外部打开时。下面的代码反映了这一点并且正在成功运行。

但是，我不确定如何实现的一件事是，当链接包含 mailto: 引用时防止淡出，因为显然这是为了打开邮件客户端窗口而设计的。因此我不希望页面淡出？

谢谢。

$(window).bind("pageshow", function(event) {
    if (event.originalEvent.persisted) {
        window.location.reload();
    }
});

(function($) {
    if (window.history) {
        $(window).on('popstate', function() {
            $("body").show();
        });
    }

    // When links are clicked
    $(document).on("click", "a", function() {
    var $link   = $(this);
    var $href   = $link.attr("href");
    var $target = $link.attr("target");

        // If link exists
        if ($href) {
            // Fade out all links unless set to open in external window target="_blank"
            if ($target !== "_blank") {
                $("body").fadeOut(250, function() {
                    history.pushState($href, null, null);
                    window.location.href = $href;
                });
                return false;
            }
        }
    });

    // On page load, fade in
    $(document).ready(function() {
        $("body").fadeTo(250, 1);
    });
}(window.jQuery));

【问题讨论】：

如果没有很多链接，我很想推荐，在你不想淡出的链接上放置一个“外部”类。然后您的委托匹配器将更改为 .on('click', 'a:not(.external)', ...)
嗨@Taplar - 网站上有很多链接，所以寻找更通用的东西，而不仅仅是一个类名。谢谢。
詹姆逊下面的解决方案有效地完成了我的建议，而不需要额外的课程。

标签： javascript jquery mailto

【解决方案1】：

一个非常优雅的方法是使用 css 属性选择器的强大功能并通过验证，所以你只需要这个：

$(document).on('click','a[href]:not([href^=mailto],[target="_blank"])',function(){
     $("body").fadeOut(250, function() {
         history.pushState(this.href, null, null);
         window.location.href = this.href;
     });
     return false;
})

这就是“魔法”发生的地方：a[href]:not([href^=mailto],[target="_blank"])（已更新以包含“has href”子句

我只选择href不以mailto开头且没有target="_blank"的链接

更多关于属性选择器：https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

【讨论】：

你应该包括他的第一张支票。如果a 有一个href
您好，非常感谢您的回答。看起来不错，对此的支持如何？
支持会让您大吃一惊，正如 mozilla 的链接中所述 - 它适用于 IE7 及更高版本，如果您使用 jQuery（并且您确实这样做了）则更是如此

【解决方案2】：

只需检查链接网址：

if($href.indexOf('mailto:') === 0){
  //the url starts with mailto:
  //it is an email link
}

更具体到您的用例，扩展您检查 _blank 的 if 语句：

if ($target !== "_blank" && $href.indexOf('mailto:') !== 0) {
  //...
}

【讨论】：

谢谢扎米。这里有很多很好的答案，但已将其标记为解决我的特定用例的正确答案。工作一种享受。
谢谢，我必须感谢@Jameson the dog tho。我建议将来使用他的答案。

【解决方案3】：

对于包含 mailto: 引用的链接，只需在代码中更改此部分

if ($href) {

有了这个

if ($href && $href.indexOf('mailto:')!==-1) {

或者检查这个fiddle 演示:not 的用法。在您的情况下，不要忘记使用 event.preventDefault() 来打开邮件客户端窗口的 mailto 链接。

【讨论】：