clipboard && .stop 复制失败解决方式(实现文本复制)

Posted 2021-11-24 前端呆头鹅

clipboard && .stop 复制失败解决方式

clipboard是一款复制粘贴用的插件，通过npm安装即可，使用简单，这里只贴出一种使用方式，想了解更多可以自行查找。

最近使用clipboard插件做复制文本的功能，代码示例如下。

<div @click="fun1">
	...
	<div id="test" data-clipboard-text="需要复制的文本放在这里">
		<div @click="fun2('#test')">复制</div>
	</div>
</div>

import Clipboard from 'clipboard';
// =====
let clipboard = new Clipboard(id);
clipboard.on('success', function (e) {
   clipboard.destroy();
   Toast({
      message: '链接已复制，可发送给客户确认',
      position: 'middle'
	 })
});
clipboard.on('error', function (e) {
    Toast.fail('不支持复制功能哦！')
    clipboard.destroy();
})

这里出现了问题，当点击复制文本进行复制后，fun1事件也会随后执行，这是由于事件冒泡机制造成的。

气泡就相当于事件，而水相当于整个dom树；事件从dom 树的触发点层层往上传递，直至传递到dom的根节点(具体自查)。

当为fun2添加了后缀.stop时(阻止冒泡后缀)，复制失败了，经查询clipboard实现基础为事件委托机制，与事件冒泡为强依赖。

多次尝试后，我选择在外层事件fun1中添加拦截。

传入event对象，在对象中获取真正点击的元素，通过判断该元素的方式，将来自复制的冒泡请求过滤掉。

<div @click="fun1($event)">
	...
	<div id="test" data-clipboard-text="需要复制的文本放在这里">
		<div class="copylink" @click="fun2('#test')">复制</div>
	</div>
</div>

fun1(e){
	var event = e || window.event;
  var target = event ? (event.target || event.srcElement) : {};
  if(target && target.className === "copylink") {
    return
  }
  ...
}

这里我做了兼容性处理，window.event.srcElement兼容IE。

这样当触发元素为复制文本时，外层函数不再触发行为。