0

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

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

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

这是体现“模糊”事件处理程序的代码（使用 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();
            });

请帮忙！谢谢。

4

2 回答 2

2

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

于 2012-05-08T09:22:21.223 回答
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();
于 2012-05-08T09:27:09.927 回答