Javascript 事件触发器答案

【问题标题】：Javascript event triggersJavascript 事件触发器
【发布时间】：2012-02-11 15:26:58
【问题描述】：

我正在尝试创建一个启用 Ajax 的网络表单，并创建了一个简单的页面。在页面上，我有一个 div，其中包含我要编辑的值。

我有工作 javascript 在 div 的内容周围添加一个文本输入框，并带有一个保存按钮以发回 Web 服务器，但与我关注的 example 不同，我没有想要一个取消按钮，而不是我希望输入框失去焦点来触发取消操作。

我在文本输入框中添加了一个 onblur 事件来取消编辑操作并将表单返回到原始未编辑状态（并且不保存更改）。

我遇到的问题是，当我点击“保存”按钮时，也会触发文本输入框的 onblur 事件。我怎样才能阻止这种情况发生？

编辑函数（当用户点击要编辑的文本时调用）如下：

function edit(obj)
{
  Element.hide(obj);
  var textarea = '<div id="'+obj.id+'_editor"><div class="fieldvalueedit"><input type="text" id="'+obj.id+'_edit" name="'+obj.id+'" rows="1" size="64" value="'+obj.innerHTML+'"></div>';
  var button = '<div class="fieldvaluebuttons"><input id="'+obj.id+'_save" type="button" value="Save"/></div></div>';

  new Insertion.After(obj, textarea+button);
  document.getElementById(obj.id+'_edit').focus();
  Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
  Event.observe(obj.id+'_edit', 'blur', function(){cleanUp(obj)}, false);
}

【问题讨论】：

好吧，你不能阻止它，因为当你点击其他东西时，元素将不可避免地失去焦点。可能的工作是将您的“模糊”活动包装在实际模糊后几毫秒运行的超时中。然后，您可以在提交按钮上使用处理程序来设置一个标志，模糊处理程序将检查该标志。
看起来像 Prototype.js JavaScript 框架。我相信 [prototypejs] 标签比 web-development 更有用。
@RobW 确实是prototype.js，我已经更新了标签以反映这一点，谢谢。
-1 对于 Rob 的评论...我花了五分钟查看代码，但没有得到它
@AndréAlçadaPadez，抱歉，我从来没有使用过 Javascript（因此之前使用过 Prototype.js，所以我不知道哪些位在 Javascript 中，哪些位在 Prototype.js 中。我没有没有意识到这是相关的 TBH，但我已按照建议添加了标签。

标签： javascript html ajax prototypejs dom-events

【解决方案1】：

您可以在文档上注册一个重置 textareas 状态的 onclick 事件，而不是在输入上使用 onblur 事件，然后在单击保存按钮时取消此事件的传播（您将希望将此应用于文本区域以及）。

Event.observe(obj.id+'_save', 'click', function( e ){
    e.stopPropagation();
    saveChanges(obj);
}, false);
Event.observe(document, 'click', function(){cleanUp(obj)}, false);

【讨论】：