网站上的点击三点弹出层，再点击复制文字改变，然后隐藏层的功能，今天全面修复过来。之前的代码出现了意外的效果，虽然不影响使用，但是用户体验大大结构。因为同时点击多个地方，可以同步显示弹出来的层，点击复制可以同步改变字体，同步消失，这是我最不愿意看到的效果。而我要实现的是，只可以显示一个层，如果点击其他的三点，就是该地方显示层，然后无论是否愿意点击复制按钮，都能隐层层。因为有的人或许是误点了，需要再任意地方点击，从而取消显示该层。经过几天的努力，今天终于实现了该功能，列出代码跟大家分享一下：

<script type="text/javascript">
	$(document).ready( function (){

			$('figure .title span').click( function (event){
			$('.link-box').hide();
			$(this).next().show();
			event.stopPropagation();
		});
		
			$(".link-box").click(function(event) {
				$(".link-box label").text('Copies!');
				setTimeout(function() {
			$(".link-box label").html("Copy");
		},1000);
				setTimeout(function() {
					$('.link-box').hide(); }, 500);
				event.stopPropagation();
			});	
		
	});
	
	$(document).click(function(){
    $(".link-box").hide();
});
	
	function copyToClipboard(element) {
		var $temp = $("<input>");
		$("body").append($temp);
		$temp.val($(element).text()).select();
		document.execCommand("copy");
		$temp.remove();
	}
</script> 

改变的地方是增加 event 属性，避免和点击显示层冲突，使用 stopPropagation() 函数可以阻止当前事件向祖辈元素的冒泡传递，也就是说该事件不会触发执行当前元素的任何祖辈元素的任何事件处理函数。 该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。

增加点击事件，同步隐藏复制层的冒泡，实现了只可以显示一个层的效果。