JS 屏蔽浏览器默认事件

Question

效果

这图里面是一个输入框，然后我想 双击后替换里面的文字，但是很明显，在替换文字前，原有文字会被鼠标双击的默认事件全选中，可以说相当难看了。

所以就会涉及到屏蔽浏览器默认事件。

我试了，在当前控件，也就是这个 input 元素上，绑定双击事件，然后不管是 preventDefault 还是 stopPropagation 或者 返回 false，都不能阻止这个双击选中文字的默认事件

在 document 对象上可以，直接返回 false 就能阻止

问题来了

1. 屏蔽这类双击选中事件，只能在 document 对象的双击事件上做手脚么？

2. 能否通过调用当前元素的 event 对象的函数来屏蔽这个事件？

注：onselectstart="return false;" 以及 css 的方式不能采用，因为不能屏蔽鼠标拖动来选择文字的操作

Answer 1

这种情况，可以用一个不透明度为 1%的div覆盖住这个元素，双击实际上在div上触发的。

Answer 2

用css的样式试试-webkit-user-select: none;

Answer 3

我自己来填坑吧，vue中，忘了还有 prevent 这个修饰符，用上就行了，不过比较奇怪的是，如果不用这个修饰符，在后面的事件处理中就没法再阻止了，估计是 Vue 是将传入函数作为二次调用的，并不是直接绑定的