Safari iphone/ipad "зависание мыши" на новой ссылке после замены предыдущей ссылки на javascript

Question

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

Это становится странным, если у вас есть виджет Ajax, который задает вопросы, и каждый ответ является ссылкой. Когда вы касаетесь одного из ответов, он выделяется с состоянием наведения, а затем, когда вопрос и ответы заменяются (с использованием javascript) новым вопросом и ответами, новый ответ, который появляется в той же позиции, что и предыдущий ответ, имеет свой состояние зависания автоматически срабатывает. Я хочу, чтобы это не произошло с новой ссылкой ответа.

Есть ли способ (может быть, что-то в javascript), который может дать мне тот же результат, что и "зависание", которое больше не находится над этим элементом?

Заметки:

• Я знаю, я мог бы просто иметь a:hover использовать тот же стиль CSS, что и a, но a:active стилизация едва заметна, так как активное состояние щелчка мышью очень короткое, поэтому я надеюсь на что-то, что может показать состояние наведения на ссылку, пока я не заменю его новым HTML
• Я пробовал различные подходы в javascript, например, вызов "blur()" для элемента dom и некоторые другие вещи, но не повезло - я начинаю думать, что лучшим решением является применение классов к ссылкам в событиях javascript самостоятельно управлять состоянием наведения (или просто оставить все как есть)

Answer 1

Проблема заключается в том, что при замене содержимого на месте Mobile Safari обрабатывает новые элементы, как если бы они были старыми, поскольку они занимают одну и ту же позицию в DOM. Один из способов - сначала удалить старые элементы, а затем добавить новые элементы асинхронно. Самый простой способ сделать это - использовать setTimeout(),

http://jsfiddle.net/chad/JNZvu/10/

// When we click on an answer
$('body').on('click', '.answer', function(){
  // don't follow it's link
  event.preventDefault();
   // fade out the container
  $('.container').fadeOut(function(){
    // remove old elements (happens after fadeOut because we are in the callback)
    $('.container').html('');
    // add new elements asynchronously and fade container back in.
    setTimeout( '$(\'.container\').html(\'<a class="answer" href="#c">link 3</a><a class="answer" href="#d">link 4</a>\');$(\'.container\').fadeIn();', 0);
  });
});

Когда вы делаете это по-настоящему, fadeOut будет вызываться одновременно с функцией AJAX, а затем удаление / добавление будет происходить в обратном вызове AJAX.

Answer 2

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

Я только что решил аналогичную проблему, когда я хочу стилизацию наведения для элементов списка, но, поскольку родитель может прокручивать одним пальцем, используя iscroll, мне нужно отменить этот эффект наведения, как только список прокрутки перемещается. Он использует jQuery, но вы поняли:

$('ul.scroll').bind('touchmove', function(e) {
    $(this).addClass('moving');
});
$('ul.scroll').bind('touchstart', function(e) {
    $(this).removeClass('moving');
});

вот мои правила стиля:

ul.scroll li:hover {
    background-color: #D1E8DA;
}
ul.scroll.moving li:hover {
    background-color: #EFEFEF;
}