是什么触发了 mobile safari (iPad) 上的模糊事件

Question

我有一个日期选择器控制器，当用户触摸屏幕上不是日期选择器的某个位置时，我想模糊该控制器。我遇到的问题是我不明白是什么触发了模糊事件。例如，如果用户触摸下个月，则会触发模糊事件，所以我想说，好的，如果 relatedTarget 是 datepicker 内的类（下个月），则显示下个月并且不要隐藏 datepicker，如果 relatedTarget 是不在日历上隐藏它。问题是相关目标 始终是未定义的。

所以我有两个问题：

1. 什么会触发移动 Safari 上的模糊事件？
2. 为什么 event.latedTarget 属性在移动版 Safari 中始终未定义？

Answer 1

在这里找到：http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5

以下注释：
iOS 注意：虽然不支持拖放，但您可以使用触摸事件产生相同的效果，如 Safari CSS 视觉效果指南中的“使用触摸拖动元素”中所述。
卸载事件可能无法按预期进行前后优化。请改用 pageshow 和 pagehide 事件。”

HTH

Answer 2

老帖子，但也许对未来参考有帮助。

前几天遇到了同样的问题。关于你的第一个问题：什么触发了移动 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
}