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.我到目前为止找到的唯一解决方法是创建＆lt; li＆gt;在顶部具有1px高度并且具有onclick事件选择那个，然后＆lt; ul＆gt;仍然可以继续接收剪贴板事件。这种解决方案是不合需要的，也不允许选择元素上的文本。

我开始相信这可能实际上是Chrome中的一个错误，并且它不符合HTML5剪贴板规范，该规范说即使没有选择某些内容，事件仍然会触发，只是那里是一个专注的节点。

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

修改

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

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

Answer 1

不要使用user-select：none。

我希望这有助于你

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
}

for firefox

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

Answer 2

事件被触发，而不是在您期望的节点上。该事件是在<body>而不是<div>：https://jsfiddle.net/DerekL/c1n4vv7j/12/

上触发的

规范确实说明了：

要触发类型为e的剪贴板事件，


让我们明白是假的

让类型清除为空列表

让clipboard-entry成为当前剪贴板内容的序列号，如果OS剪贴板不支持序列号，则为null

如果事件是由用户代理生成的，则让信任为真，否则为

设定目标如下：

如果上下文可编辑：

让target成为包含文档顺序中选择开头的元素，或者如果没有选择或光标，则为body元素。



否则，如果上下文不可编辑

如果没有节点具有焦点，则让target成为焦点节点或body元素。

我相信这是一个＆＃34; bug＆＃34;由于节点确实收到了focus个事件但未收到cut个事件，但请记住，user-select属性仍然是草稿而不是标准。

Answer 3

就我而言，我需要在表单元格中添加自定义选择行为，以保持复制和粘贴的能力。由于使用user-select: none在Firefox中会产生错误，因此我使用了selection伪元素解决了，删除了默认的文本选择：

    table td::selection {
      background: none;
    }

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

3 个答案: