Якоря теряют способность щелкать мышью после прокрутки в iOS Safari

Question

Используя это, чтобы забрать клики:

$("nav li a").click(function(event) {
    event.preventDefault();
    target = $(this).attr("href").replace('#', '');
    goToByScroll(target);
});

А это функция прокрутки:

function goToByScroll(id) {
    $('html, body').animate({
        scrollTop: $("#"+id).offset().top - totalHeight 
    }, 'slow');
}

Первый щелчок работает, но после этого ссылки не становятся активными, если страница не прокручена вручную. Есть идеи?

Answer 1

В ходе дальнейшего расследования с человеком из iOS, мы обнаружили, что это ошибка в Safari на iOS5.

Я пробовал это;

// $('html,body').animate({ scrollTop: scrollto + 'px' }, 'slow')
window.scroll(0,0);

И увидел, что он на самом деле потянул фиксированный заголовок вниз по экрану. С щелчком работает.

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

Кажется, они разрешили его тестирование на iOS6.

Я исчерпал все виды манипуляций с CSS и DOM, удалив и заново вставив новую область заголовка ... ничего не работает.

Так что я на 99% уверен, что опубликую этот ОТВЕТ. лол. Хотя я понимаю, что это тебе не поможет.

Answer 2

Здесь может быть несколько факторов, большинство из которых не связаны с кодом, который вы связали. Чтобы щелчок не работал:

1. Событие клика очищается
2. Элемент, на который вы пытаетесь щелкнуть, покрыт другим (вероятно, прозрачным) элементом
3. интерактивная область вашего элемента смещена или деформирована

Чтобы при первой возможности возникла проблема, ваш элемент должен был оставаться неприкосновенным до обновления или до повторного создания обработчика щелчков. Убедитесь, что обработчик кликов не создается более одного раза. Вы можете сделать это, установив точку останова или оператор оповещения / консоли в точке вызова $(element).click(function() { ... }).

Для того, чтобы возникла вторая возможность, другой элемент должен присутствовать поверх вашего активируемого элемента. Это можно проверить с помощью браузера или расширения браузера, которое позволяет щелкнуть правой кнопкой мыши элемент и проверить его. Если проверяемый элемент не является активируемым элементом, вероятно, это проблема.

Чтобы проблема была третьей, вам необходимо проверить положение, размер и форму элемента, на который можно кликнуть, когда он не щелкаем. Используйте ваш браузер или расширение браузера, чтобы выбрать и выделить элемент на странице. Посмотрите, где он показывается, какие измерения он имеет, что он оценивает z-index, какие свойства отображения он имеет (display: inline печально известен тем, что вызывает проблемы с кликабельностью), и если он даже «фактически» в текущем видовой экран.

Короче говоря, код, который вы опубликовали, почти ничего не говорит о том, что может происходить, поэтому вам нужно больше отлаживать или предоставлять больше кода.