2012-02-11 92 views
0

我试图创建一个启用了Ajax的webform,并创建了一个简单的页面。在页面上,我有一个包含我希望编辑的值的div。Javascript事件触发器

我有工作的JavaScript添加周围的div的内容文本输入框,完成与保存按钮回发到网络服务器,但不像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); 
} 
+0

那么你不能阻止它,因为当你点击其他东西时,元素将不可避免地失去焦点。可能会发挥作用的是在实际模糊后的几毫秒内将“模糊”活动包含在超时中。然后,您可以使用提交按钮上的处理程序来设置模糊处理程序将检查的标志。 – Pointy 2012-02-11 15:36:12

+1

看起来像[Prototype.js](http://www.prototypejs.org)JavaScript框架。我相信[prototypejs]标签比'web-development'更有用。 – 2012-02-11 15:37:46

+0

@RobW这确实是prototype.js,我已经更新了标签以反映这一点,谢谢。 – Bryan 2012-02-11 15:42:42

回答

1

代替使用输入你可以对复位文档注册onClick事件的onblur事件textareas状态,然后在单击保存按钮时取消该事件的传播(您也可以将其应用于文本区域)。

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