Как заменить щелчок на touchstart на устройствах iOS

Цель

Чтобы закрыть родительский div тега привязки при нажатии. В приведенном ниже коде я хочу скрыть div performance_tt, когда пользователь нажимает на тег привязки close_performance_tt.

Проблема

Не удалось заставить его работать на устройствах iOS, потратив на это несколько часов. Отлично работает на всем остальном, даже на устройстве BlackBerry 10.

<div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;">
    <div>Website performance has become an important consideration for most sites.
    The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention.
    As a result, creating a system that is optimized for fast responses and low latency is key.</div>
    <a id="close_performance_tt" href="#">Close</a>
    <script>
    var userAgent = navigator.userAgent.toLowerCase();
    var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
    if (isiOS) {
        $("#close_performance_tt").bind('touchstart', function() {
            alert('Touch-start event triggered');
        });
    } else {
        $("#close_performance_tt").bind('click', function() {
            alert('Click event triggered');
        });
    }
    </script>
</div>

ipad click jquery touchstart
person KalC    schedule 13.08.2013    source источник
comment
почему бы не использовать $("#close_performance_tt").bind('click touchstart', ..) вместо if..else   -  person Arun P Johny    schedule 13.08.2013
comment
Но это не причина проблемы, верно?   -  person KalC    schedule 13.08.2013
comment
вы должны убедиться, что флаг isiOS имеет правильное значение   -  person Arun P Johny    schedule 13.08.2013

Ответы (3)


arrow_upward
17
arrow_downward

Определите обработчик кликов, который вы сможете использовать позже:

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");

$("a").bind(clickHandler, function(e) {
    alert("clicked or tapped. This button used: " + clickHandler);
});

Это вызовет щелчок на несенсорных устройствах и сенсорный запуск на сенсорных устройствах.

Когда это сказано, я настоятельно рекомендую вместо этого использовать Быстрый клик и использовать обычные события кликов. С помощью приведенного выше решения вы будете запускать «touchstart» для ссылок, когда вы прокручиваете их, например, для прокрутки страницы, что не идеально.

person curly_brackets    schedule 12.09.2013

arrow_upward
2
arrow_downward

В iOS тег a является кликабельным элементом, поэтому прикосновение к ссылке вызовет события мыши (включая click).

Этот код

$("#close_performance_tt").bind('click',function() { 
    alert('Click event triggered');                             
});

будет нормально работать на ios.

Для получения дополнительной информации: http://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

person BMH    schedule 13.08.2013
comment
Если я использую ваш код, мне нужно дважды щелкнуть, прежде чем я получу предупреждение. Впоследствии мне нужно щелкнуть около 4 раз, чтобы предупреждение отобразилось. Однако со следующим кодом предупреждение срабатывает все время. $(#close_performance_tt).bind('нажмите touchstart',function() { alert('Событие зарегистрировано.'); }); - person KalC; 13.08.2013
comment
Я просто тестирую код на своем iPad, он отлично работает. Убедитесь, что вы делаете одиночное нажатие, если вы удерживаете или дважды нажимаете, это не вызовет событие click. - person BMH; 13.08.2013
comment
У меня нет айпада. Тестирование на iPhone 4S. Не сработало. Я проверю на iPad через пару часов. Вернется. - person KalC; 13.08.2013

arrow_upward
2
arrow_downward

См. http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

Для событий мыши iOS, таких как щелчок, не всплывайте, если:

  • Целевым элементом события является ссылка или поле формы.
  • Целевой элемент или любой из его предков до элемента , но не включая его, имеет явный набор обработчиков событий для любого из событий мыши. Этот обработчик событий может быть пустой функцией.
  • Целевой элемент или любой из его предков до документа включительно имеет объявления CSS курсора: указателя.

Самое простое решение для меня — применить cursor: pointer везде, если это сенсорное устройство iOS. Поскольку курсора нет, он не оказывает никакого визуального воздействия.

person Sebastien Lorber    schedule 16.07.2015
comment
действительно полезный ответ, ребята, обратите на это внимание! спасибо, Себастьян - person mcmxc; 20.12.2017