禁用文本选择但允许剪切、复制和粘贴

Question

这是一个列表组件，允许您选择、剪切、复制、粘贴和拖放以重新排列列表项。问题是 Chrome 中的 user-select: none 似乎禁用了剪切、复制和粘贴事件，即使它应用于子级而不是父级。

我创建了以下 JSFiddle 来重现该问题： https://jsfiddle.net/c1n4vv7j/10/

<div tabindex="0" oncut="alert('hello')">
    <li>Click Here and Hit CTRL+X</li>
    <li>Works in Firefox and Edge but not Chrome!</li>
</div>

如果您按照说明操作，您应该会在 Firefox 和 Edge 中看到一个弹出窗口，但不是 Chrome 61。到目前为止，我发现的唯一解决方法是在顶部创建一个高度为 1px 并具有 onclick 事件的

选择它，那么

仍然可以继续接收剪贴板事件。这种解决方案是不可取的，也不允许选择元素上的文本。

我开始确信这实际上可能是 Chrome 中的一个错误，并且它不符合 HTML5 剪贴板规范，该规范说即使没有选择任何东西，事件仍然应该触发，只是有一个焦点节点。

任何人都知道一个很好的解决方法，或者我应该向 Chrome 报告这个吗？

编辑：

如果您更改剪切处理程序以向我们显示 activeElement，它会报告 div，而事件目标报告正文：

$("*").on("cut", function(event){
  console.log(event.target);
  console.log(document.activeElement);
});

Answer 1

不要使用用户选择：无。

希望对你有帮助

div > li{
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}

div > li::selection {
    background: rgba(0,0,0,0); //you can use transparent also
}

火狐

div > li::selection {
    background: rgba(0,0,0,0); //you can use transparent also
}