Javascript 单击链接时页面淡出，mailto:链接除外

在下面的代码中，我淡出任何页面，然后在单击任何标记时淡入新页面。但是，在某些情况下，我们不希望在单击时淡出页面，例如，当标签设置为通过

target=“\u blank”

从外部打开时。下面的代码反映了这一点，并且正在成功运行

然而，有一件事我不确定如何实现，那就是当链接包含mailto:reference时，防止淡出，因为很明显，这是为了打开邮件客户端窗口而设计的。所以我不想让页面淡出

多谢各位

$(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));

---

只需检查链接url：

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

更具体地针对您的用例，扩展if语句，在其中检查

\u blank

：

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

---

只需检查链接url：

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

更具体地针对您的用例，扩展if语句，在其中检查

\u blank

：

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

---

对于包含

mailto:

引用的链接，只需在代码中更改此部分

if ($href) {

用这个

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

---

或者，检查此项以演示

：not

的用法。在您的情况下，不要忘记使用

event.preventDefault（）

打开邮件客户端窗口的邮件链接。

对于包含

mailto:

引用的链接，只需在代码中更改此部分即可

if ($href) {

用这个

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

---

或者，检查此项以演示

：not

的用法。在您的情况下，不要忘记使用

event.preventDefault（）

打开邮件客户端窗口中的邮件链接。

一种非常优雅的方法是使用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=“\u blank”]）

（更新为包含“has

href

”子句）

我只选择href不以

mailto开头且没有
target=“\u blank”

关于属性选择器的更多信息：
一种非常优雅的方法是使用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=“\u blank”]）
（更新为包含“has
href
”子句）

我只选择href不以
mailto开头且没有
target=“\u blank”

关于属性选择器的更多信息：
如果没有太多链接，我会建议您在不希望淡出的链接上添加一类“外部”链接。然后您的代理匹配器将更改为
。on（'click'，'a:not（.external）…）
HI@Taplar-网站上有很多链接，因此希望找到更通用的链接，而不仅仅是一个类名。谢谢。下面詹姆逊的解决方案有效地满足了我的建议，而不需要额外的类。如果没有太多链接，我很想推荐，在你不需要的链接上加一个“外部”类ant淡出。然后您的代理匹配器将只更改为
。on（'click'，'a:not（.external）…）
HI@Taplar-网站上有很多链接，因此需要更通用的东西，而不仅仅是一个类名。谢谢。下面詹姆逊的解决方案有效地满足了我的建议，而不需要额外的类。你应该包括他的第一个检查。如果
a
有一个
href
HI，非常感谢你的回答。看起来很棒，怎么样是否支持此功能？正如mozilla链接中所述，支持会让您感到惊讶-它在IE7及更高版本中工作，如果您使用jQuery（确实如此），情况会更糟你应该包括他的第一个检查。如果
a
有一个
href
您好，非常感谢您的回答。看起来很好，对此的支持如何？正如mozilla链接中所述，支持会让您大吃一惊-它在IE7及更高版本中工作，如果您使用jQuery（您确实这样做了），情况会更糟谢谢你，扎米。这里有很多很好的答案，但是我已经将其标记为正确的，用于解决我的特定用例。效果很好。谢谢，我必须赞扬@Jameson the dog tho。我建议将来使用他的答案。谢谢你，扎米。这里有很多很好的答案，但是已经将其标记为正确的，用于解决我的特定用例。效果很好请客。谢谢，我要感谢@Jameson the dog tho。我建议以后使用他的答案。