Question

我在表单上有'提交'的活动。在IE8中，如果我在没有输入任何信息的情况下提交表单，只需单击提交按钮，它就会发布表单，并且它永远不会被Backbone中定义的事件捕获或处理。但是，如果我只是单击一个输入字段，那么点击提交即可处理该事件。

骨干事件的设置如下：

events: {

'submit #form': 'submitForm',

        },
submitForm: function(e){
     e.preventDefault();
}

为什么会出现这种想法？

更新：以下是表单的示例：

<div id="form">
  <form action="/action" method="post">
  <input type="text" name="name" />
  <button type="submit" value="Submit"></button>
  </form>
</div>

它实际上仅在IE8中，并且仅在您提交之前没有首先单击表单中的元素。该事件在FF，Chrome，IE9 +中触发，没有任何问题。但只有在IE8中，如果你只是点击提交，而不做任何其他事情，事件就不会被触发。

Answer 1

使用此方法无法委派某些事件。 '焦点'和'模糊'不起作用，在IE8和更低的'更改'，'提交'和'重置'也不起作用。它实际上在annotated source of Backbone但由于某种原因不在the documentation。

JQuery的文档实际上表明Backbone使用的方法（$.delegate）现在被$.on取代，它能够处理这类事件。

所以你的选择是：

重载Backbone.View.delegateEvents以使用$ .on而不是$ .delegate
手动绑定事件，如EndangeredMassa所示。

Answer 2

我认为这里的问题是在IE9之前，submit events don't bubble up the DOM。在您的示例中，您在包含提交表单的div上注册事件。您可能需要在呈现后专门处理表单的提交事件，而不是依赖于主干事件。

render: function(){
  // render content
  $el.find('form').on('submit', submitForm);
},

submitForm: function(){ ... }

我不确定为什么如果你先将光标放在窗体的元素中，它会起作用。

Answer 3

渲染后，您可以使用$ .on为IE8正确附加这些事件

在postRender中使用此通用函数：

fixIeBug = function(){
    if(!$.browser.msie || $.browser.version > 8){
        return;
    }

    var delegateEventSplitter = /^(\S+)\s*(.*)$/;

    var events = this.events;
    if($.isFunction(events)){
        events = events.apply(this);                
    }

    var handleEvents = ['change', 'submit', 'reset', 'focus', 'blur']

    for (var key in events) {
        var method = events[key];
        if (!_.isFunction(method)) method = this[events[key]];
        if (!method) throw new Error('Method "' + events[key] + '" does not exist');
        var match = key.match(delegateEventSplitter);
        var eventName = match[1], selector = match[2];

        if( _.indexOf(handleEvents, eventName) == -1){ continue; }

        method = _.bind(method, this);
        if (selector === '') {

        } else {                  
            var self = this;                     
            (function(eventName,method){
                //console.log('trying to set "on" handler for %s, key=%s', eventName, key);
                self.$(selector).on(eventName, function(e){                            
                    //console.log('got it, eventName=%s', eventName);                  
                    return method(e);
                })
            })(eventName,method);
        }
    }                
}

Answer 4

您有'submit #form'，但请注意form id属性位于包含<div id="form">，而不是表单本身。如果您只是使用'submit form'（抓住el中的任何表单元素），或者您在<form>属性中添加了ID并相应地选择它，那么您应该获得预期的行为。

除非as noted，否则您正在使用IE＆lt; 9，在这种情况下，您无法绑定change，submit或reset事件。

在IE8中无法识别Backbone.js事件

4 个答案: