骨干点击事件在Firefox中无法正常工作

Question

这段代码可以完美地在Safari和chrome中执行，但是Firefox存在问题。

基本上，我有一组单选按钮。 仅当单选按钮的属性为选中时，才应触发此click事件。 但是由于某种原因，即使未选中单选按钮，firefox中的单选按钮似乎也会触发该事件。

var MyView = Backbone.View.extend({

    events: {
        'click input[type="radio"]:checked' : 'radioListener',
    },

     radioListener : function(evt) {
         var selectedObject =  evt.currentTarget;
         $(selectedObject).prop('checked', false);
         $(selectedObject).val('');
         $(selectedObject).change(this.clearSelection(evt));
    }

 });

Answer 1

您对事件绑定的工作方式有错误的理解。

当您将事件侦听器绑定到DOM元素时，您提供的jQuery选择器（在您的情况下为input[type="radio"]:checked ）用于在事件绑定而非事件触发 （触发）期间指定DOM元素。 这意味着在您的示例中，无论选定的单选按钮是否在单击时选中，都将触发click事件。

因此，您必须在事件监听器中过滤单选按钮。 像这样：

var MyView = Backbone.View.extend({

    events: {
        'click input[type="radio"]' : 'radioListener',
    },

    radioListener : function(evt) {
        var selectedObject =  evt.currentTarget;
        if (selectedObject.is(':checked')) {
            $(selectedObject).prop('checked', false);
            $(selectedObject).val('');
            $(selectedObject).change(this.clearSelection(evt));
        }
    }

});