onblur fires too many times or not at

Question

Я работаю над интерактивным веб-приложением, в настоящее время настроенным на http://picselbocs.com/projects/goalcandy (пользователь: demo@demo.com, password: demo). Он позволяет перетаскивать элементы из левого столбца в рабочее пространство справа и, в частности, изменять размер и редактировать их.

Сегодня я работал над функцией редактирования текста объектов и сталкивался с каким-то очень странным поведением, что я не могу найти источник. Если вы сначала нажмете на текстовое поле внутри вновь созданного объекта (чтобы отредактировать этот текст), а затем щелкните за пределами текстового поля, выдается предупреждающее сообщение (я использовал это только для целей тестирования). Проблема в том, что если вы снова нажмете в том же текстовом поле, а затем за его пределами, предупреждение срабатывает все больше и больше раз. Короче говоря, обработчик событий для события «размытия» срабатывает все больше и больше с каждой попыткой редактирования текста. Почему это? Что мне не хватает? Я не настолько разбираюсь в модуле отладки Firebug или Chrome, по крайней мере, не с более тонкими функциями, которые могли бы мне помочь в этом случае (я так полагаю), и я не могу найти источник проблемы. Но

Другая странная проблема, упомянутая в названии, заключается в том, что нажатие на изображение объекта, если объект имеет как текст, так и изображение, не вызывает предупреждение ... В противном случае сказал, обработчик события для «размытия» «не срабатывает вообще, если вы не нажмете что-нибудь еще, кроме изображения объекта. Любая идея, почему это происходит?

Вот код (с помощью JQuery), который воплощает в себе "размытости" обработчик события:

var jqSelector = "#mesh div.mesh-obj span"; 
     $(document) 
      .on("mouseover mouseenter", jqSelector, function(event) { 
       event.stopPropagation(); 
       $(this).css({'background-color':'#FF9', 'cursor':'text'}); 
      }) 
      .on("mouseout mouseleave", jqSelector, function(event) { 
       event.stopPropagation(); 
       $(this).css({'background-color':'transparent', 'cursor':'inherit'}); 
      }) 
      .on("mousedown", jqSelector, function(event) { 
       event.stopPropagation(); // prevent activating the parent object's "mousedown/click" event handlers 
      }) 
      .on("click", jqSelector, function(event) { 
       event.stopPropagation(); // prevent activating the parent object's "mousedown/click" event handlers 

       //alert('click'); 

       // Cache jQuery objects 
       var jqSpan = $(this), 
        jqPre = jqSpan.parent(), 
        jqTextarea = jqPre.parent().find('textarea').first(); 

       // "Replace" the <pre> element with the <textarea> 
       jqPre.css('visibility','hidden'); 
       jqTextarea 
        .show() 
        .text(jqSpan.text()) 
        .val(jqSpan.text()) 
        .css('background-color','#ff9') 
        .on('click mousedown dblclick', function(event){ event.stopPropagation(); }) 
        .on('blur', function(event){ 
         event.stopPropagation(); 
         // Hide the <textarea> element and make the <pre> visible again 
         jqSpan.text(jqTextarea.val()); 
         jqTextarea.hide(); 
         jqPre.css('visibility','visible'); 
         alert('blur'); 
         //jqTextarea.off('blur'); 
        }) 
        .focus(); 
      }); 

Пожалуйста помощь! Благодарю.

Answer 1

Вы повторно добавляете событие размытия каждый раз, когда вы нажимаете на текстовую область. Это не отменяет старый, он добавляет новый.

Answer 2

Вы должны повторно добавить обработчик событий, как это:

    jqTextarea 
        .show() 
        .text(jqSpan.text()) 
        .val(jqSpan.text()) 
        .css('background-color','#ff9') 
        .off('click mousedown dblclick') 
        .on('click mousedown dblclick', function(event){ event.stopPropagation(); }) 
        .off('blur') // remove event listener 
        .on('blur', function(event){ 
         event.stopPropagation(); 
         jqSpan.text(jqTextarea.val()); 
         jqTextarea.hide(); 
         jqPre.css('visibility','visible'); 
         alert('blur'); 
        }) 
        .focus();