Question

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

要编辑已创建对象上的文本，只需单击文本字段（标题或注释）即可。 <span>元素将替换为<textarea>，您可以通过该<span>元素编辑内容。当“模糊”事件发生时，textarea将消失，其值将添加到$(document).on('mousedown dragstart', 'img', function(event) { event.preventDefault(); });元素。 问题是单击对象的图像（如果它同时包含图像和文本字段）可以防止“模糊”事件被触发。

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

alert('blur')

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

PS：{{1}}调用允许我监视事件何时触发。

Answer 1

你使用一些变量说

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

然后单击textarea set locks.textarea_lock = true;在图像处理程序中检查此锁：

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

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

模糊事件处理程序被jquery preventDefault（）方法阻止

1 个答案: