iOS автоматическое исправление зависания? - PullRequest
Новая
       1

iOS автоматическое исправление зависания?

16 голосов
/ 01 апреля 2011

Существует ли плагин jQuery или сценарий JavaScript, который автоматически циклически перебирает каждый курсор мыши (найденный во внешней таблице стилей) и связывает его с событием двойного приземления?

  • Приземление 1 - CSS: hover isсрабатывание
  • Прикосновение 2 - Нажмите (после ссылки или действия формы)

Если такого еще нет, можно ли это сделать и как (рекомендации)?

РЕДАКТИРОВАТЬ:

Чтобы было ясно, я не в поиске двойного нажатия.Touchdown 1 - это отдельная вкладка, как Touchdown 2.Выбор между ними может составлять не более 0 секунд или не более 3-х минут.

Без прикосновения:

  • : элемент hover -> становится видимым
  • щелчок -> следующая ссылка или другое действие

Сенсорный (iOS):

  • касание 1 -> элемент становится видимым
  • касание 2 -> следующая ссылка или другое действие

Ответы [ 8 ]

13 голосов
/ 06 апреля 2011

Попробуйте это: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>iPad Experiment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            if(navigator.platform == "iPad") {
                $("a").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
                    var onClick; // this will be a function
                    var firstClick = function() {
                        onClick = secondClick;
                        return false;
                    };
                    var secondClick = function() {
                        onClick = firstClick;
                        return true;
                    };
                    onClick = firstClick;
                    $(this).click(function() {
                        return onClick();
                    });
                });
            }
        });
    </script>
    <style type="text/css">
        a:hover {
            color:white;
            background:#FF00FF;
        }
    </style>
<body>
    <a href="http://google.ca">Google</a>
    <a href="http://stackoverflow.com">stackoverflow.com</a>
</body>
</html>

... или посмотрите демо на моем веб-сайте . Обратите внимание, что он настроен на то, чтобы творить чудеса только на iPad - обнаружение всех версий iOS - еще один вопрос в моих книгах;)

Работает на основании того, что ...

После того, как вы щелкнете ссылку на iphone или ipad, на нем останется смоделированное наведение мыши, которое активирует стиль a: hover css для этой ссылки. Если ссылка имеет обработчик JavaScript, который удерживает вас на той же странице, состояние наведения не изменится, пока вы не нажмете другую ссылку.

Образец цитирования: Safari iphone / ipad «зависание мыши» на новой ссылке после замены предыдущей ссылки на javascript

6 голосов
/ 06 апреля 2011

Я использовал это: 

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

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

3 голосов
/ 16 марта 2012

Вот еще одна оптимизированная версия, которая также обрабатывает закрытие : hover

Вы должны будете инкапсулировать свой сайт с 

<div id="container"></div>

чтобы это работало. Просто положить закрывающее событие на тело ничего не сделало 

var bodyBound = false;
var container;

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/iPad/i))
{
    container = $("#container");

     // Provoke iOS :hover event
    $("a.someLink").on("mouseover", handleHoverClick);
}

function handleClose(event)
{
    container.off("click", handleClose);

    bodyBound = false;
}

function handleHoverClick(event)
{
    if (!bodyBound)
    {
        bodyBound = true;

        // Somehow, just calling this function—even if empty—closes the :hover
        container.on("click", handleClose);
    }
}
2 голосов
/ 22 марта 2013

Я создал это обновление на основе решения Richard JP Le Guens.Это работает ОТЛИЧНО, но моя версия исправляет проблему, распознаваемую DADU.

Также я исправил его обходной путь для обнаружения iPad.Мое решение обнаруживает и другие сенсорные устройства (кроме IE10 на поверхности MS, я не помню специальной обработки MS).

Мое исправление не является на 100% идеальным решением, но оно сбрасывает исправление при наведениипри наведении на другую ссылку. 

<!DOCTYPE html>
<html>
<head>
    <title>TouchDevice Experiment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            if(document.createEvent("TouchEvent")) { // using document.createEvent is more reliable than navigator (Modernizr uses this practice)
                $("a").each(function() { // have to use an `each` here - either a jQuery `each` or a `for(...)` loop
                    var onClick; // this will be a function
                    var firstClick = function() {
                        $("a").trigger("JWUnhover"); // triggering hoverfix reset if any link gets touched

                        onClick = secondClick;
                        return false;
                    };
                    secondClick = function() {
                        onClick = firstClick;
                        return true;
                    };
                    onClick = firstClick;
                    $(this).click(function() {
                        return onClick();
                    });
                    $(this).bind('JWUnhover', function(){ onClick = firstClick; });
                });
            }
        });
    </script>
    <style type="text/css">
        a:hover {
            color:white;
            background:#FF00FF;
        }
    </style>
</head>
<body>
    <a href="http://google.ca">Google</a>
    <a href="http://stackoverflow.com">stackoverflow.com</a>
</body>
</html>
1 голос
/ 08 мая 2013

Это сработало для меня! 

// Ipad Navigation Hover Support
    $('#header .nav li a').bind('touchstart touchend', function(e) {
        if( $(this).attr("href") != "" ){
            window.location = $(this).attr("href");
        }

    });
1 голос
/ 05 апреля 2011

Нет такого плагина jQuery, о котором я знаю, чтобы сделать такую ​​вещь.

Вы не можете вызвать класс css psuedo, такой как ": hover".Однако вы можете циклически перемещаться по элементам привязки и добавлять класс css ".hover" в события сенсорного запуска и касания следующим образом: 

    var pageLinks = document.getElementsByTagName('a');
for(var i = 0; i < pageLinks.length; i++){
    pageLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
    pageLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}

Чтобы добавить распознаватель жестов касанием двойным пальцем, вы можете использовать такой плагин,: http://plugins.jquery.com/project/multiswipe

0 голосов
/ 14 октября 2014

Существует более простой способ исправить проблему с iOS и состояниями наведения, используя CSS. Для ссылки у вас есть проблема с установленным свойством cursor равным pointer, и состояние наведения будет игнорироваться в iOS. Все ссылки для правильной работы см. Ниже: 

a
{cursor: pointer;}
0 голосов
/ 25 сентября 2011

Вот оптимизированная версия кода jQuery от Richard JP Le Guen: 

$(document).ready(function() {

    $('a').each(function() {

        var clicked = false;

        $(this).bind('click', function() {

            if(!clicked) return !(clicked = true);
        });
    });
});
...