是否可以仅检测 onkeyup 和 onpaste 之间的一个事件？答案

【问题标题】：Is it possible to detect only one event between onkeyup and onpaste?是否可以仅检测 onkeyup 和 onpaste 之间的一个事件？
【发布时间】：2019-09-26 07:59:22
【问题描述】：

有一个<input> 元素。我添加了作为 Vue 指令的处理程序来监听 keyup 和 paste 事件，例如@keyup and @paste。当我粘贴一些东西时，我只想要onPaste 事件检测。但是他们两个都被检测到了。是否可以仅检测粘贴事件？以及如何做？

<div id="app">
  <input type="text" @keyup="keyup" @paste="onPaste">
</div>

new Vue({
  el:'#app',
  methods: {
    onPaste: function () {
        console.log('paste');
    },
    keyup: function () {
        console.log('keyup');
    },
  }
});

【问题讨论】：

您能提供更多的上下文吗？为什么需要区分keyup 和paste，而不是例如使用input 事件？
@skirtle 哦，我没想到input。我会搜索那个。谢谢。
@skirtle 输入元素中有旧值。我想增加新的价值。我可以知道我使用 input 事件粘贴的新值吗？
如果您的问题是“如何在用户粘贴一些内容后修改输入文本？”那是另一个问题，请搜索我相信您会找到的答案。如果不发布这个问题，我相信你会很快得到回答。

标签： javascript vue.js dom-events

【解决方案1】：

让我们先建立一些基础知识，这样我们才能解决您的问题：

建立 HTML 原生事件基础

onpaste 事件通常由用户通过以下两种方式之一触发：

用户按下 CTRL + V 按钮（keydown + keyup 每按下一个按钮就会触发 HTML 事件
鼠标右键打开浏览器上下文菜单并选择选项从它粘贴到输入（contextmenu HTML 事件被触发）

Vue.js

Vue.js 内置了事件监听器，您可以监听任何原生 HTML 事件。如果您只想监听 onpaste HTML 事件，您只需像上面那样使用 @paste 监听此事件。

动机不明

尝试修改浏览器的原生行为，即paste 事件不会由keydown / keyup / contextmenu 事件组成，只要您尝试使用浏览器原生 HTML API 是不可能的.如果您选择构建自己的自定义粘贴逻辑并阻止由您决定的默认设置，但老实说，我真的不明白您做这种事情的动机是什么，因为浏览器的原生 HTML 事件完全符合他们的需要到。

我认为您需要问自己的主要问题是您要完成什么？您当前试图解决的预期行为或挑战是什么。通过澄清这一点，您可能会提出另一个问题并获得更准确的答案，这可以帮助您在当前工作中取得进展。祝你好运。

【讨论】：