阻止 Safari 在拖动鼠标时切换到文本光标

Question

阻止 Safari 在拖动鼠标时切换到文本光标

我正在开发一个表格，用户将在其中单击单元格并将鼠标拖动到其他单元格上以与其进行交互。

我希望鼠标光标在用户位于桌面上的整个过程中保持为“指针”。他们不应该能够选择任何文本。

下面是一些示例代码来演示：

<html>
  <head>
    <style> 
    td {
      user-select: none;
      -webkit-user-select: none;
      cursor: pointer;
    }
    </style>
  </head>
  <body>
    <table>
      <tr><td>Test</td><td>Test</td></tr>
      <tr><td>Test</td><td>Test</td></tr>
    </table>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这在 Chrome 中完美运行 - 无论您如何使用鼠标与单元格交互，光标都不会改变指针。

但是，一旦您开始将鼠标拖动到表格上，Safari 总是会更改为“文本”光标（即使 -webkit-user-select 成功阻止您实际选择文本）。

我尝试将上面的样式应用于 :active 选择器以及父元素（例如），但没有成功。

有谁知道如何在 Safari 中实现此功能？

Answer 1

Tha*_*you 1

使用mousedown事件和event.preventDefault()-

\n

\r\n

function preventDefault(event) {\n  event.preventDefault()\n}

Run Code Online (Sandbox Code Playgroud)\r\n

div {\n  cursor: pointer;\n  background-color: lavender;\n  padding: 1rem;\n  margin: 1rem 0;\n}

Run Code Online (Sandbox Code Playgroud)\r\n

<div>\n  \xe2\x9d\x8c click and drag with default cursor\n</div>\n\n<div onmousedown="preventDefault(event)">\n  \xe2\x9c\x85 click and drag with custom cursor\n</div>

Run Code Online (Sandbox Code Playgroud)\r\n

\r\n

\n

归档时间：	5 年，11 月前
查看次数：	801 次
最近记录：	3 年，7 月前