Что вызывает событие размытия на мобильном сафари (iPad) - PullRequest
Новая
       12

Что вызывает событие размытия на мобильном сафари (iPad)

5 голосов
/ 21 февраля 2011

У меня есть контроллер DatePicker, который я хочу размыть, когда пользователь касается где-то на экране, который не является DatePicker. Проблема, которую я имею с этим, состоит в том, что я не понимаю, что вызывает событие размытия. Например, если в следующем месяце пользователь коснется события размытия, я хотел бы сказать, хорошо, если relatedTarget является классом внутри указателя даты (следующий месяц), затем показать следующий месяц и не скрывать средство выбора даты, если relatedTarget не в календаре это скрыть. Проблема в том, что relatedTarget всегда неопределен

Итак, у меня два вопроса:

  1. Что вызывает размытие на мобильном Safari?
  2. Почему свойство event.relatedTarget всегда не определено в мобильном Safari?

Ответы [ 2 ]

2 голосов
/ 16 ноября 2011

Обнаружено здесь: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5

следующее примечание: «Примечание для iOS: хотя перетаскивание не поддерживается, вы можете получить тот же эффект, используя сенсорные события, как описано в разделе« Использование сенсорного перетаскивания элементов »”В Safari CSS Visual Effects Guide. Событие unload может работать не так, как ожидалось, для оптимизации вперед и назад. Вместо этого используйте события pagehow и pagehide."

HTH

0 голосов
/ 13 июля 2017

Старый пост, но может быть полезен для дальнейшей ссылки.

Наткнулся на ту же проблему на днях. Относительно вашего первого вопроса: что вызывает размытие на мобильном Safari? -> Оно не срабатывает в случае сенсорного события (iPad / iPhone).

Я справился с этим, установив прослушиватель событий на вложенном div. Вопреки ожиданиям (по крайней мере, мне), событие, которое вы хотите прослушать, - это «щелчок». Ниже упрощенная ситуация: 

<div id="enclosing-div">
  <input type="date" "id="date-picker-field">
  <!--Whatever other elements you might have in the enclosing div-->
</div>

Теперь ваш JS может выглядеть так: 

//js

//Get the enclosing div
var enclosingDiv = document.getElementById('enclosing-div');
//Set up an event listener
enclosingDiv.addEventListener('click', blurEnclosedElements);

//function to handle the event listener
function blurEnclosedElements(){
  //Get the element(s) you want to blur and apply your blur logics to it
}
...