Почему событие щелчка не работает в MacOS Safari?

Question

У меня есть этот 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"); 
        });
});

Как это должно работать:

1. Страница загружается и сразу показывает элемент #preloader. Как только страница загружена, элемент #preloader исчезает, а контейнер # page входит.

2. Затем, когда вы нажимаете на ссылку, элемент #preloader исчезает, пока браузер загружает следующую страницу. Вернуться к шагу 1.

Таким образом, между загрузками страниц происходит плавный переход.

Это прекрасно работает на Firefox и Chrome. Но в Safari и во всех браузерах iOS событие click на шаге 2 не работает. Элемент #preloader не исчезает до загрузки новой страницы.

Я попытался добавить protectDefault, в результате чего элемент #preloader исчез, но затем браузер никогда не перенаправлялся на новую страницу.

Есть идеи?

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