Question

所以我有一个带有可点击幻灯片元素的容器div。双击下一个或上一个按钮时，幻灯片元素后的几个标记会突出显示。如果我禁用下一个div的选择，双击将选择下一个div。

截至目前我正在使用：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

这个CSS对我不起作用，因为我不想禁用div和div中所有元素的选择，我只是想保护div子元素不受另一个div的双击选择。有没有办法保护div免受选择？

Answer 1

如果您要从div中选择所有后代，请执行以下操作：

div * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

但是，显然在这种情况下存在速度问题，特别是对于生产而言。我建议您修改HTML并选择div的直接后代。

div h1,
div p,
div span/*, etc. */ {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

如果您想覆盖user-select: none个孩子的div的默认继承，那么为每个元素添加user-select: text（包括跨浏览器声明）。

保护DIV不被选中

1 个答案: