点击去他区域 阻止input/textarea 失去焦点

点击去他区域 阻止input/textarea 失去焦点

需求描述：点击搜索按钮 搜索框不失去焦点

​ 或者 富文本编辑器（设置了 contenteditable=“true” 的编辑区）中点击上传图片的按钮 编辑器的光标不会消失

以点击搜索按钮 搜索框不失去焦点需求为例子

解决方案1 blur事件中 重新让input获取焦点

<el-input @blur='blurFn' ref='inp'/>

·····
blurFn（）{
	this.$refs.inp.focus()
}
·····

这种方式光标位置不可控 不推荐

解决方案2 阻止失去焦点

<div id="test">按钮</div>

document.getElementById('test').onmousedown = event => {
  event.preventDefault && event.preventDefault();
  return false;
};

解决方案3 通过A标签防止失去焦点位置 — 推荐

思路是在要点击的元素外层套一个a标签，设置href=“javascript: ;”，阻止浏览器的默认事件。

<a href="javascript: ;">
  <div id="test">按钮</d