建筑:
>骨干0.9.9
> jquery 1.7.2
> jquery mobile 1.3.1
用户代理:
> iOS 5.1.1(iPad)
> Safari 5.1手机
>完整的用户代理字符串:Mozilla / 5.0(iPad; CUP OS 5_1_1,如Mac OS X)AppleWebKit / 534.46(KHTML,如Gecko)版本/ 5.1 Mobile / 9B206 Safari / 7534.48.3
我有一个相同View的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”.但大多数情况下,用户代理无法集中在textarea中.我在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); } },};
这是textarea正确聚焦时获得的事件顺序:touchstart,vmouSEOver,vmousedown,touchend,vmouseup,vclick,tap,vmouSEOut,mousemove,mousedown,focusin,focus,mouseup,click,focusout,blur
这是textarea无法聚焦的事件顺序:touchstart,mousemove
由于某些原因,mousemove之后的事件无法触发.我也试过手动触发这些事件,但是textarea元素仍然没有聚焦,也没有键盘弹出,例如:
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); } };
我已经倒了Apple’s event handler documentation无济于事,我在github的任何一个回购中都找不到与此有关的任何错误报告.
另外两个我不理解的怪异行为:
> textarea的第一个实例始终正常工作
>尽管有一个模糊事件被调用,但textarea仍然聚焦
任何见解将不胜感激.
干杯,