OnBlur не работает должным образом

Я использую размытие с помощью позвоночника. В моем магистральном Виде у меня естьOnBlur не работает должным образом

var EventView = Backbone.View.extend({ 

    tagName: "li", 

    template: _.template($('#item-template').html()), 

    events: { 
     "click .toggle" : "toggleDone", 
     "dblclick .view" : "edit", 
     "click a.destroy" : "clear", 
     "keypress .edit" : "updateOnEnter", 
     "blur .edit"  : "close" 
    }, 

    initialize: function() { 
     this.listenTo(this.model, 'change', this.render); 
     this.listenTo(this.model, 'destroy', this.remove); 
    }, 

    render: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     this.$el.toggleClass('done', this.model.get('done')); 
     this.form = this.$(".edit"); 
     this.input = this.$(".edit-title"); 
     this.eventLeaders = this.$('.edit-leaders'); 
     this.eventDescription = this.$('.edit-description'); 
     return this; 
    }, 

    toggleDone: function() { 
     this.model.toggle(); 
    }, 

    edit: function() { 
     this.$el.addClass("editing"); 
     this.form.focus(); 
    }, 

    close: function() { 

     if (!this.input.val()) { 
     this.clear(); 
     } else { 
     this.model.save({ 
        title: this.input.val(), 
        description: this.eventDescription.val(), 
        leaders: this.eventLeaders.val().split(/[, ]+/)}); 
     this.$el.removeClass("editing"); 
     } 
    }, 

    updateOnEnter: function(e) { 
     if (e.keyCode == 13) this.close(); 
    }, 

    clear: function() { 
     this.model.destroy(); 
    } 

});

В моем HTML у меня есть:

<script type="text/template" id="item-template"> 
    <div class="view"> 
     <input class="toggle" type="checkbox" <%= done ? 'checked="checked"' : '' %> /> 
     <label><%- title %></label> 
     <div class="details"> 
     <span class="description"><p><%- description %></p>Leaders:</span> 
     <% _.each(leaders, function(leader){ %> 
      <span class="event-leader"> <%= leader %> </span> 
     <% }); %> 
     </div> 
     <a class="destroy"></a> 
    </div> 
    <form class="edit"> 
     <input class="edit-title" type="text" value="<%- title %>" /> 
     <input class="edit-description" type="text" value="<%- description %>" /> 
     <input class="edit-leaders" type="text" value="<%= leaders.join(', ') %>" /> 
    </form> 
    </script>

и в моем CSS у меня есть:

#event-list li.editing .edit { 
    display: block; 
    width: 444px; 
    padding: 13px 15px 14px 20px; 
    margin: -30px; 
} 

#event-list li.editing .view { 
    display: none; 
} 
#event-list li .edit { 
    display: none; 
}

Проблема у меня есть событие размытия обжигает когда я переключаюсь между редактированием разных текстовых полей, и я не уверен, почему. Даже когда я использую вкладку для переключения между текстовыми полями. Я не хочу, чтобы это было по умолчанию. Как я могу это изменить?

источник

2013-03-05 Nonconformist

размывания событие возникает, когда элемент теряет фокус. Поэтому, когда вы переключаетесь между текстовыми полями, он уволен ...! –

Но я помещаю событие размытия, чтобы действовать, когда моя форма теряет фокус, а не когда мои поля ввода теряют фокус? – Nonconformist

Является ли событие размытия на '

Если селектор в вашем events -hash, как это

'blur <the event designator> .edit <the selector>': 'onBlur'

The Backbone.js delegateEvents использует JQuery on -функции, чтобы связать события как this

this.$el.on(eventName, selector, method);

Однако, есть gotcha, который можно найти в jQuery docs по адресу on -функция и ее параметры

селектор

Тип: String

Строка Селектор для фильтрации потомков выбранных элементов, которые вызывают событие. Если селектор имеет значение null или опущен, событие всегда срабатывает, когда оно достигает выбранного элемента.

Как бы то ни было, когда селектор включен, обработчик событий захватывает события, распространяющиеся от дочерних элементов элемента (в этом случае входы). Без селектора события не пойманы (я сделал fiddle, чтобы продемонстрировать, откройте консоль и переключите разные входы). Быстрая игра с моей скрипкой также показала, что почти невозможно определить, есть ли фокус.

Именно поэтому событие размытия запускается полями ввода. Что касается того, как определить, когда ваша форма теряет фокус: трудно сказать, потому что браузеры сами решают, какие элементы они позволяют сосредоточить. Вот некоторые источники StackOverflow я нашел, но не смог попасть на работу в скрипкой:

Using jQuery to test if an input has focus

When onblur occurs, how can I find out which element focus went *to*?

источник

2013-03-05 23:05:17 jakee

OnBlur не работает должным образом

ответ

Смежные вопросы