Исправление автоматического наведения iOS?
Есть ли плагин jQuery или JavaScript script, который автоматически проходит через каждый наведение CSS (находится во внешней таблице стилей) и связывает его с событием двойного касания?
- Touchdown 1 - CSS: зависание запускается
- Touchdown 2 - Нажмите (ссылку или действие формы)
Если еще не что-то подобное, можно ли это сделать и как (рекомендации)?
EDIT:
Чтобы быть ясным, я не ищу двойного крана. Touchdown 1 - это одна вкладка, как Touchdown 2. Это может быть меньше, чем 0 секунд между обоими или целых 3 минуты, что выбор пользователя.
Отсутствие касания:
- : элемент hover → становится видимым
- click → следующая ссылка или другое действие
Touch (iOS):
- Прикосновение 1 → становится видимым.
- touchdown 2 → следующая ссылка или другое действие
Ответы
Ответ 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;}
