Подтвердить что ты не робот

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

Есть ли плагин jQuery или JavaScript script, который автоматически проходит через каждый наведение CSS (находится во внешней таблице стилей) и связывает его с событием двойного касания?

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

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

EDIT:

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

Отсутствие касания:

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

Touch (iOS):

  • Прикосновение 1 → становится видимым.
  • touchdown 2 → следующая ссылка или другое действие
4b9b3361

ОТВЕТЫ

Ответ 1

Попробуйте следующее:

<!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, она оставит симулированный наведение мыши, который запускает стилизацию c: hover css по этой ссылке. Если у ссылки есть обработчик javascript, который держит вас на одной странице, состояние зависания не изменится, пока вы не нажмете на другую ссылку.

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

Ответ 2

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

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

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

Ответ 3

Вот еще одна оптимизированная версия, которая также позволяет закрыть: 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);
    }
}

Ответ 4

Я создал это обновление apon Richard JP Le Guens. Он работает GREAT, но моя версия исправляет проблему, распознанную DADU.

Также я исправил его обходное решение для обнаружения iPads. Мое решение также обнаруживает любые другие сенсорные устройства (кроме 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>

Ответ 5

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

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

    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

Ответ 6

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

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

    });

Ответ 7

Здесь оптимизированная версия кода jQuery, предоставленная Ричардом Дж. П. Ле Гуэном:

$(document).ready(function() {

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

        var clicked = false;

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

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

Ответ 8

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

a
{cursor: pointer;}