我在iPad上的Safari遇到了一个令人恼火的bug，无法修复。
架构：
- backbone 0.9.9
- jquery 1.7.2
- jquery mobile 1.3.1
用户代理：
- iOS 5.1.1 (iPad)
- Safari 5.1 mobile
- 完整的用户代理字符串：Mozilla/5.0 (iPad; CUP OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3
我有10个相同的视图实例，每个视图都有一个包含textarea元素的嵌套视图。出现问题的是，当您点击textarea时，它会随机地无法聚焦。我已经阅读过Safari移动版在尝试触发不来自于点击/单击事件的聚焦事件时会出现问题，但这是直接的点击，它仍然不能可靠地聚焦。以下是视图的简化代码：
var ParentView = Backbone.View.extend({
render: function() {
this.$el.html("<div class='textarea-container'></div>");
this.textareaView = new TextareaView({
el: this.$el.find('.textarea-container')
});
this.textareaView.render();
}
};
var TextareaView = Backbone.View.extend({
events: {
'tap .my-textarea': 'handleTextareaTap'
},
render: function() {
this.$el.html('<textarea rows="4" cols="80" class='my-textarea'></textarea>');
},
handleTextareaTap: function(event) {
console.log('TAPPED');
}
};
var i = 0;
while ( i < 10 ) {
var view = new ParentView();
view.render();
$(body).append(view.$el);
i++;
}
点击事件处理程序会100%触发。控制台每次正确显示“TAPPED”。但是大多数情况下，用户代理无法将焦点放在文本区域中。我将以下行添加到TextareaView中，以查看Safari确切触发的事件及其顺序：
var TextareaView = Backbone.View.extend({
render: function() {
this.$el.html('<textarea rows="4" cols="80" class='my-textarea'></textarea>');
this.$el.find('.my-textarea').on('blur change click contextmenu copy cut dblclick focus focusin focusout hashchange keydown keypress keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup mousewheel paste reset scroll select submit textinput unload wheel tap touch scrollstart scrollstop swipe swipeleft swiperight vclick vmousecancel vmousedown vmousemove vmouseout vmouseover vmouseup touchstart touchend touchmove touchcancel', function(event) {
console.log(event.type);
}
},
};
这是当文本区域正确聚焦时我得到的事件顺序：touchstart、vmouseover、vmousedown、touchend、vmouseup、vclick、tap、vmouseout、mousemove、mousedown、focusin、focus、mouseup、click、focusout、blur 这是当文本区域无法聚焦时我得到的事件顺序：touchstart、vmouseover、vmousedown、touchend、vmouseup、vclick、tap、vmouseout、mousemove 由于某种原因，鼠标移动后的事件未能触发。我已尝试手动触发这些事件，但文本区域仍然无法聚焦，键盘也不会弹出，例如：
var TextareaView = Backbone.View.extend({
handleTextareaTap: function(event) {
// This still doesn't work:
this.$el.find('.my-textarea').trigger('focus');
// Neither does waiting for the synthesized WebKit events to fire:
var _this = this;
setTimeout(function(){
_this.$el.find('.my-textarea').trigger('focus');
}, 1000);
}
};
我已经仔细研究了苹果的事件处理程序文档，但未能找到解决方法。在github上的所有库中，我也没有找到任何与此相关的错误报告。
我还不理解另外两个奇怪的行为：
1. 第一个文本区域始终正常工作。 2. 尽管调用了“失焦”事件，文本区域仍然会获得焦点。
如果您有任何见解，请告诉我。
谢谢！