Polymer JS：为同一操作触发多个事件（提交时模糊）答案

【问题标题】：PolymerJS: Multiple events fire for same action (on-blur when on-submit)Polymer JS：为同一操作触发多个事件（提交时模糊）
【发布时间】：2015-11-22 02:43:53
【问题描述】：

我有这个输入表单，我想在用户触发on-submit或on-blur事件时保存输入的值。

我有一个问题，每当用户触发on-submit，自然也会触发on-blur 事件。因此会触发两个具有相同内容的事件。（问题不大，但仍然）。

我已经搜索了解决方案并找到了很多 jQuery，我相信我需要一个原始的 javascript 解决方案。

这是我的表格：

<form method="post" on-submit="doneEditAction">
    <input 
        type="text" 
        value="{{editValue::input}}"
        id="editItemInputField"
        on-keyup="editKeyupAction"
        on-blur="editBlur">
    <button type="submit">edit</button>
</form>

当我提交表单时，此表单会触发 doneEditAction 事件。但与此同时，editBlur 事件也会被触发，这应该与doneEditAction 事件相同，以保存输入的值。

editBlur事件

editBlur: function (e) {
    this.doneEditAction(e);

    this.editing = false;
}

doneEditAction 事件

doneEditAction: function (e) {
    e.preventDefault();

    console.log(this.editingValue);

    this.editing = false;
}

这是我的问题：

如何让表单在提交表单时不触发on-blur 事件？或者
如何让表单始终只触发一个事件？或者，请参阅编辑，
如果触发了两个相同的事件，这是否重要（从性能的角度来看）？

编辑

刚刚看到Polymer TodoMVC，当您尝试对其进行编辑时，它们还会触发两个事件。证明：

这是否意味着，如果触发两个相同的事件实际上并不重要？

【问题讨论】：

标签： javascript events polymer

【解决方案1】：

由于每次触发on-submit 事件时都会自动触发on-blur 事件，因此doneEdit 事件处理程序会执行两次。

由于doneEdit 事件处理程序将editing 属性设置为false 两次，因此有一个简单的解决方案可以确保doneEdit 事件只执行一次。

在doneEdit 中，我们检查editing 是否为true，然后才执行我们想要的任何操作，将editing 值设置为false。

doneEdit(function) {
    if(this.editing === true) {
        this.editing = false;
        console.log(this.editingValue);
    }
}

因此，当doneEdit 处理程序由于on-blur 事件而被第二次调用时，this.editing 已经设置为false 并且console.log() 不会执行两次。

感谢 PolymerTodoMVC 源代码。

【讨论】：