在iOS上的Safari中针对textarea触发的不一致事件

Question

在iOS上的Safari中针对textarea触发的不一致事件

bie*_*gel 8 jquery textarea ipad jquery-mobile backbone.js

我在Safari for iPad上遇到了一个令我愤怒的错误,我无法修复.

建筑:

骨干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++;
}

Run Code Online (Sandbox Code Playgroud)

点击事件处理程序会在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);
        }
    },
};

Run Code Online (Sandbox Code Playgroud)

这是textarea正确聚焦时的事件顺序:touchstart,vmouseover,vmousedown,touchend,vmouseup,vclick,tap,vmouseout,mousemove,mousedown,focusin,focus,mouseup,click,focusout,blur

这是textarea无法聚焦的事件顺序:touchstart,vmouseover,vmousedown,touchend,vmouseup,vclick,tap,vmouseout,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);
    }
};

Run Code Online (Sandbox Code Playgroud)

我倾注了Apple的事件处理程序文档无济于事,我在github上的任何repos中都找不到与此相关的任何错误报告.

另外两个我不理解的怪异行为: