1

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

要编辑已创建对象的文本，您只需单击文本字段，标题或评论。该<span>元素被替换为<textarea>，然后您可以通过它编辑内容。当“blur”事件发生时，textarea 消失，它的值被添加到<span>元素中。问题是单击对象的图像（如果它同时具有图像和文本字段）会阻止触发“模糊”事件。

我使用以下代码段来防止图像与父对象分开拖动，并且刚刚发现这是导致问题的原因。但我不能不使用它，同时我必须不使用它：

$(document).on('mousedown dragstart', 'img', function(event) { event.preventDefault(); });

如何解决此问题并允许 onblur 事件处理程序在单击图像时运行，但同时保持默认的行为预防？

PS：alert('blur')调用允许我监控事件何时触发。

4

1 回答 1

1

你使用一些变量说

var locks = {}; 
locks.textarea_lock = false;

然后点击 textarea set locks.textarea_lock = true;In image handler 检查这个锁：

$(document).on('mousedown dragstart', 'img', function(event) { 
    if (locks.textarea_lock) {
        return;
    }
    event.preventDefault(); 
});

在“模糊”处理程序中解锁变量locks.textarea_lock = false;。

于 2012-05-08T10:13:18.063 回答