使用clipboard.js复制当前网页链接，避开clipboard.js点击两次才生效问题

关于使用clipboard.js复制当前网页链接，避开clipboard.js点击两次才生效问题以下文字资料是由3搜网小编为大家搜集整理后发布的内容，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“使用clipboard.js复制当前网页链接，避开clipboard.js点击两次才生效问题”文章吧。

关于clipboard.js不依赖flash, 不依赖其他框架，gzip压缩后只有3kb大小。这就是我选择clipboard.js的原因。

详细资料请参考clipboard.js中文网：http://www.clipboardjs.cn/.

具体使用clipboard.js使用起来很方便，大部分的使用方法官网里面也有介绍。

引用clipboard.js

我选择的方法是从第三方CDN 那里获取资源。

复制当前网页链接

下面就是如何使用clipboard.js复制当前网页链接的代码：

<button class="btn"></button>

<!-- 引用clipboard.js -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript">
	document.getElementsByClassName("btn")[0].onclick = function() {
		var clipboard = new ClipboardJS(this, {
			text: function() {
				return window.location.href;
			}
		});
		clipboard.on("success", function(e) {
			console.log("ok");
		});
		clipboard.on("error", function(e) {
			console.log("fail");
		});
	}
</script>

但是在使用时会发现有一个问题：需要点击两次才能成功复制。具体什么原因我也不是清楚（用setTimeOut()方法设置延时3秒执行试了一下，也不是代码时延问题）。网上看到解决方法都不是我想要的。在多次尝试中，我找到了我想要的那种方法。

解决clipboard.js点击两次才生效问题

既然它要第二次点击之后才能复制，那我就帮它多点击一次。

<button class="btn"></button>

<!-- 引用clipboard.js -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript">
	document.getElementsByClassName("btn")[0].onclick = function() {
		var clipboard = new ClipboardJS(this, {
		    text: function() {
				return window.location.href;
			}
		});
		clipboard.on("success", function(e) {
			console.log("ok");
			clipboard.destroy();
		});
		clipboard.on("error", function(e) {
			console.log("fail");
		});
		this.click();  //解决clipboard二次点击生效问题
		clipboard.destroy();
	}
</script>

要注意clipboard.destroy()的使用，this.click()和clipboard.destroy()这两行代码的执行顺序必须是先this.click()后clipboard.destroy()。我们点击后第一次生成的clipboard对象必须要用clipboard.destroy()清除。我们生成的辅助点击事件生成的第二个clipboard对象可以不清除(也就是clipboard.on(“success”)里面的clipboard.destroy())也能达到同样效果。当然，清除它只想更加精确地管理 DOM 的生命周期。

以上就是关于“使用clipboard.js复制当前网页链接，避开clipboard.js点击两次才生效问题”这篇文章的内容，希望分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注3搜网技术频道。