PolymerJS：针对同一操作触发多个事件（提交时为on-blur）

Question

我有这个输入表单，只要用户触发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;
}

这是我的问题：

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

修改

当您尝试编辑时，只看到Polymer TodoMVC并且他们还会触发两个事件。证明：

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

Answer 1

由于每次触发on-blur事件时都会自动触发on-submit事件，因此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源代码。