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

时间:2012-05-08 09:12:51

标签: javascript jquery html css

我正在开发一个交互式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();
            });

请帮忙!感谢。

2 个答案:

答案 0 :(得分:2)

每次单击文本区域时,都会重新添加模糊事件。这不会覆盖旧的,它会增加一个新的。

答案 1 :(得分:1)

你必须重新添加这样的事件处理程序:

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