Question

我正在开发一个交互式Web应用程序，目前已在http://picselbocs.com/projects/goalcandy上设置（用户：demo@demo.com，密码：demo）。它允许您将项目从左列拖动到右侧的工作区，并调整大小/编辑它们等。

今天我一直在研究对象的文本编辑功能，并且遇到了一些非常奇怪的行为，我无法找到它的来源。如果首先单击新创建的对象中的文本字段（以编辑该文本），然后在文本框外单击，则会触发警报消息（我仅将其用于测试目的）。问题是，如果您再次在同一文本字段中单击然后在其外部，则警报会触发越来越多次。 简而言之，每次新的文本编辑尝试时，“模糊”事件的事件处理程序都会触发越来越多次。这是为什么？我错过了什么？ 我对Firebug或Chrome的调试模块并不是很有经验，至少在这种情况下没有更微妙的功能可以帮助我（我假设如此），而且我找不到问题的根源。但是

标题中提到的另一个奇怪的问题是点击对象的图像，如果对象同时包含文本和图像，则不会触发警报... 否则说，“模糊”的事件处理程序“除非您点击对象图像以外的任何其他内容，否则根本不会触发。知道为什么会这样吗？

这是代码（使用jquery），它体现了“blur”事件处理程序：

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();

onblur发射太多次或根本不发射

2 个答案: