Element UI 的el-input同時綁定@keyup.enter.native和@blur沖突

問題： el-input框同時綁定鍵盤事件和blur事件，造成兩次提交

Before:

keyup事件觸發后，blur同樣會被觸發，造成兩次提交handleInputConfirm方法。

<div class="keyword-content">
    <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm">
    </el-input>
</div>

After:

解決方法：使用keyup事件觸發blur事件

<div class="keyword-content">
    <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="$event.target.blur"
            @blur="handleInputConfirm">
    </el-input>
</div>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現的。 ??事件，就是文檔或瀏覽器窗口中發生的一些特...
    霜天曉閱讀 3,526評論 1贊 11
  • 總結： 鼠標事件 1.click與dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r閱讀 1,629評論 2贊 10
  • (續jQuery基礎(1)) 第5章 DOM節點的復制與替換 （1）DOM拷貝clone() 克隆節點是DOM的常...
    凜0_0閱讀 1,360評論 0贊 8
  • 第1章 鼠標事件 1-1 jQuery鼠標事件之click與dbclick事件 用交互操作中，最簡單直接的操作就是...
    mo默22閱讀 1,295評論 0贊 6
  • 馬大大好，下面是我的背景和問題： 【背景】： 1、 自己是大學生，剛剛畢業，想自己創業。 2、 家有個200平米的...
    烏鴉不眠閱讀 350評論 0贊 0