为啥单击事件在 MacOS Safari 上不起作用？

Posted 2023-05-07

【中文标题】为啥单击事件在 MacOS Safari 上不起作用？

【英文标题】：Why is click event not working on MacOS Safari?为什么单击事件在 MacOS Safari 上不起作用？

【发布时间】：2019-04-11 02:22:20

【问题描述】：

我有这个 jQuery：

jQuery(document).ready(function($) 
    // When the page is loading show the #preloader element 
    $("#preloader").fadeOut("slow");
    $("#page-container").fadeIn("slow");
    // When an article with article grid is clicked, display the loader
    $("a").on("touchstart click", function()  
        $("#preloader").fadeIn("slow"); 
        );
);

它应该如何工作：

页面加载并立即显示#preloader 元素。页面一加载，#preloader 元素就会淡出，而#page-container 会淡入。

然后，当您单击链接时，#preloader 元素会在浏览器加载下一页时淡入。返回第 1 步。

因此在页面加载之间存在无缝过渡。

这在 Firefox 和 Chrome 上效果很好。但在 Safari 和所有 ios 浏览器上，第 2 步中的点击事件不起作用。 #preloader 元素在新页面加载之前不会淡入。

我尝试添加使#preloader 元素淡入的 preventDefault，但随后浏览器从未重定向到新页面。

有什么想法吗？

【问题讨论】：

被点击的<a>元素是动态注入内容的一部分吗？

@LorenzoS 不，它们是 DOM 的一部分

【参考方案1】：

解决了这个问题。这是我最终使用的：

jQuery(document).ready(function($) 
    // When the page is loading show the #preloader element 
    $("#preloader").fadeOut("slow");
    $("#page-container").fadeIn("slow");
    // When an link is clicked, display the loader
    $("a").on("touchstart click", function()  
        event.preventDefault();
        newLocation = this.href;
        $("#preloader").fadeIn("slow", newpage); 
    );
    function newpage() 
        window.location = newLocation;
    
);