如何从 css 样式的"TR"突出显示所选行中排除按钮功能？

Question

嘿，猜猜。我有代码的片段行，我将向您展示我的位。我希望你能给我正确的答案。首先我有CSS代码，其中行的结构如下所示：

<style type='text/css'>
.gridview {
display: inline-block;
border-collapse: collapse;
margin: 0px 4px 4px 0;
box-shadow: 3px 3px 4px #bbb;
}
.gridview, .gridview td {
margin: 0;
border:  1px solid #cccccc;
}
.gridview tr {
background: #F4F9FD;
}
.gridview tr:nth-child(odd) {
background-color: #EDF5FC;
}
.gridview tr:nth-child(even) {
background-color: #F4F9FD;
}
.gridview td {
font-weight: normal;
text-align: left;
vertical-align: middle;
}
.gridview td {
padding: 4px 10px 5px 9px;
}
.gridview tr:hover td, .gridview tbody tr:hover td {
background-color: #feb4cc;
cursor: pointer;
color: white;
}
.gridview .selected, .gridview tbody .selected {
background-color: #E74C3C;
color: #fff;
}
button {
display: none;
}
td:hover button {
display: block;
margin: -1px -8px 0px 0px;
padding: 0px 2px 0px 2px;
cursor: pointer;
float: right;
}
</style>

其次，我有一点JavaScript像这样：

function highlight(e) {
if (e.className == 'selected') {
e.className = e.className.replace('selected', '');}
else {
e.className += 'selected';
}
}
function toClipboard(e) {
var cell = e.parentNode,
copyText = cell.getElementsByTagName('span'),
selection = window.getSelection(),
range = document.createRange();
range.selectNodeContents(copyText[0]);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
}
</script>

最后HTML内容的第三个见下面的下面：

<table border=1 class='gridview'>
<colgroup>
<col width='135'/>
<col width='130'/>
<col width='250'/>
</colgroup>
<tr OnClick=highlight(this)>
<td><span>Row 1 Column 1 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
<td><span>Row 1 Column 2 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
<td><span>Row 1 Column 3 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
</tr>
<tr OnClick=highlight(this)>
<td><span>Row 2 Column 1 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
<td><span>Row 2 Column 2 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
<td><span>Row 2 Column 3 of Loren Ipsum</span><button onclick=toClipboard(this)><small>Copy</small></button></td>
</tr>
</table>

问题是，如果我不想在单击同时运行的toClipboard((函数的按钮时包括突出显示所选行，该怎么办???

无论如何，提前感谢您花时间阅读此胎面和 任何帮助将不胜感激，再次感谢，对不起我的 英语不好...

Answer 1

在toClipboard()函数末尾使用event.stopPropagation()以防止"当前事件的进一步传播"。

function toClipboard(e) {
var cell = e.parentNode,
copyText = cell.getElementsByTagName('span'),
selection = window.getSelection(),
range = document.createRange();
range.selectNodeContents(copyText[0]);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
event.stopPropagation(); // This prevents highlight(e) from being called
}