Question

在下面的代码中，我正在淡出任何页面，然后在点击任何标记时淡入新页面。但是，在某些情况下，我们不希望在点击时淡出页面，例如，当标记设置为通过target="_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));

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

这就是＆＃34;魔术＆＃34;发生：a[href]:not([href^=mailto],[target="_blank"])（更新为包含＆＃34;有href＆＃34;条款

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

的链接

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

Answer 2

只需查看链接网址：

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

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

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

Answer 3

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

if ($href) {

用这个

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

或者，请检查此fiddle，了解:not的用法。在您的情况下，不要忘记使用event.preventDefault()作为打开邮件客户端窗口的mailto链接。

单击链接时的页面淡入淡出，但mailto：links除外

3 个答案: