仅当用户单击某个元素时才防止模糊/聚焦事件

Question

这是情况：我有一个可编辑的文本区域。 当用户选择文本区域并进行更改时，会出现一个保存按钮。 当他们单击文本区域外时，按钮会消失，如果他们进行了更改，他们会收到一条警告，询问他们是否要保存更改。 但是，如果他们单击保存按钮，我不希望出现警报，并且我希望保存功能通过附加到按钮的 onclick 事件触发。 即使按下保存按钮，以下代码也会发出警报，并且不会运行保存按钮的 onClick 代码。 使这项工作的最佳方法是什么？ 谢谢！！！

$(".userNoteTextArea").focus(function() {
$("#noteTextAreaButtons").show();
}).bind('focusout', function(event) {
if (!$(event.target).is('#noteTextAreaButtons')) {
    $("#noteTextAreaButtons").hide();
    if (stillNotSaved == true) {
        if (confirm("Save changes?")) { //Ok button pressed...
            storeUserNote2(); //save note
        }
    }
}
});

保存按钮代码：

<div id="noteTextAreaButtons" style="display:none;"><input id="saveUserNoteButton" class="buttonAutoWide opaque" type="button" value="Saved" onClick="storeUserNote2(); this.value='Saved'"/></div>

编辑：此文件可在http://gospelriver.com/favhymns/favhymns_temp.html查看。 单击我的歌曲按钮。

Answer 1

包括一个新功能，如下所示

function SaveClicked(){
    stillNotSaved = false;
    storeUserNote2(); 
    this.value='Saved';
}

希望你用过的stillNotSaved变量是js中的global variable 。 并修改您的input代码，如下所示。

<input id="saveUserNoteButton" class="buttonAutoWide opaque" 
            type="button" value="Saved" onClick="SaveClicked();"/>

Answer 2

我认为我最终可能会忘记整个按钮方法，并在进行更改后退出文本区域时使用自动提示 - 确定 = 保存，取消 = 放弃更改。