可折叠定义列表问题上的“单击复制”

Question

我有一个“可折叠的”定义列表。

对于列表中的每个项目，我都在定义术语中添加了“单击复制”按钮，以复制每个术语的段落文本。

问题在于，每次我单击“单击复制”按钮时，它都会自动展开（或折叠）该段落，而我不希望它这样做。 我希望仅在单击定义术语的文本时才展开（或折叠）该段落，而不是单击定义术语元素内的按钮时才将其展开。

/* Collapsible Definition List usando jQuery */
(function( $ ){
$.fn.collapsible_definition_list = function() {
   return this.each(function(){  
		$(this).find('dd').hide().end().find('dt').addClass("more").bind({
			click: function(){
				$(this).toggleClass("more less");
				$(this).nextAll().each(function(){
					if($(this).is('dt')){
						return false;
					}
					$(this).slideToggle();
				});			
			}
		}); 
   });  
};
})( jQuery );

$(document).ready(function(){
	$('.collapsible').collapsible_definition_list();
});

/* Here is the code for the click to copy: */
function copyToClipboard(element) {
		var $temp = $("<textarea>");
		var brRegex = /<br\s*[\/]?>/gi;
		$("body").append($temp);
		$temp.val($(element).html().replace(brRegex, "\r\n")).select();
		document.execCommand("copy");
		$temp.remove();
		}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<dl class="collapsible">
		<dt><button onclick="copyToClipboard('#p1')">Click to Copy</button> Item 1</dt>
		<dd id="p1">Test text 1.<br>This is paragraph  #1</dd>

		<dt><button onclick="copyToClipboard('#p2')">Click to Copy</button> Item 2</dt>
		<dd id="p2">Test text 2.<br>This is paragraph  #2</dd>
		
		<dt><button onclick="copyToClipboard('#p3')">Click to Copy</button> Item 3</dt>
		<dd id="p3">Test text 3.<br>This is paragraph  #3</dd>
</dl>

我该怎么做才能单击“单击复制”按钮而不激活定义术语元素的折叠/展开功能？

（以防万一，如果我做错了事，请和我一起...我已经凭经验做到了）