怎么阻止 input 事件的默认行为？

常见事件用 prevent 事件修饰符就可以了比如

<a href="https://www.baidu.com/" @click.reevent=“clickFun”>百度</a>

就可以只执行 clickFun() 而不会跳转。但是如果加到输入事件上例如：

<div contenteditable="true" @input.prevent="inputFun"/>

inputFun()方法会执行，但输入框也仍然会被输入字符(如果是中文则会调用输入法)

放弃使用事件修饰符，改用 preventDefault() 尝试了一下，代码如下：

    input(e){
      e.preventDefault()
      console.log(e.data)
    }

执行效果和默认修饰符一样，默认行为没有被阻止。开始怀疑 input 事件是不是自带 passive,事件的默认行为在事件方法调用之前就被执行了，所以 preventDefault() 才没有生效。

做了一个测试，代码如下：

<a href="https://www.baidu.com/" @click.passive=“clickFun”>百度</a>

运行结果是在 clickFun() 中也无法阻止默认行为了。当然，这只能说明 preventDefault 没法阻止被 passive 修饰的事件。并不能证明 input 的默认行为不能被阻止就是由此引起的。于是又做了下面的测试：

<template>
 <div contenteditable="true" id="input" />
</template>

<script>
export default {
  name: 'App',
   mounted() {
    document.getElementById('input').addEventListener('input', function (e) {
      console.log(e.data)
      e.preventDefault(); //阻止默认的处理方式
    }, {passive: false}); //passive 参数不能省略，用来兼容ios和android
  }
}
</script>

结果 input 的默认行为还是没有被阻止，而且意外发现如果配置 {passive: true} 的话，浏览器控制台会报错，如图：意思是 {passive: true} 和 e.preventDefault(); 不能同时存在，这个是合理的，可以理解。但是为什么 {passive: false} 的时候 e.preventDefault() 即不报错，也不生效呢？难道不是 passive 导致的？那又是什么原因？该怎么阻止呢？