如何使用 JavaScript 暂时禁用文本选择？

Posted 2023-05-08

【中文标题】如何使用 JavaScript 暂时禁用文本选择？

【英文标题】：How can I disable Text Selection temporarily using JavaScript?

【发布时间】：2010-10-27 20:31:11

【问题描述】：

这是一个有点具体的问题，所以我会直奔主题。

我正在为 Web 应用程序的一部分开发一个简短而简单的拖放例程，尽管拖放位工作正常，但该站点在操作过程中变得非常丑陋，因为浏览器仍然执行默认设置操作和文本选择。

我尝试了一些解决方案，主要涉及从 mousedown 或 click 事件返回 false，虽然它们在某些浏览器中禁用了文本选择，但它们似乎也完全禁用了 mouseup 事件，破坏了脚本的“drop”位并让这个永久浮动图标悬在鼠标周围——不好玩。

我真的不希望文本选择完全消失，我只是想建议浏览器......不要在拖动时这样做，如果这有意义的话。由于我知道受影响的区域（涉及 iframe），我可以轻松地将属性应用于受影响的元素等。如有必要，我可以发布代码，但我正在寻找更多通用解决方案。由于这只是美学问题，我正在寻找适用于大多数浏览器的修复程序，它并不是那么重要。

谢谢！

【问题讨论】：

……冗余标题的攻击开始了，我应该踢自己。 ^_^ 我真的应该知道这里暗示了“以编程方式”。

【参考方案1】：

在 W3C 浏览器中，您可以在 event 对象上调用 preventDefault 方法。 IE 等效项是将returnValue 设置为false。

function stopDefault(e) 
    if (e && e.preventDefault) 
        e.preventDefault();
    
    else 
        window.event.returnValue = false;
    
    return false;

编辑：只需重新阅读问题，您可能还希望在处理实际拖动的代码部分中阻止默认操作，而不仅仅是在初始鼠标按下或单击时。

【讨论】：

这行得通，但它似乎杀死了 mouseup 事件。这样做后有没有办法检测按钮何时被释放？

mouseup 事件是否附加到被拖动的对象上？如果是这样，请尝试将其附加到文档或窗口。在拖动对象上的 mousedown 事件期间将其附加，然后在 mouseup 处理程序中，再次将其分离。此外，b/c 处理程序将在文档对象的上下文中执行，您需要通过保持对拖动对象的引用来获得创意。

我最终让它工作了。我在 iFrame 中开始拖动，然后在容器框架中的鼠标下方绘制对象。 （这样做的目的是将对象“拖放”到另一个帧上，很有趣。）因此，我需要在所有帧（包括父帧）中监听 mouseup，而不是在起始 iFrame 中监听 mouseup。 （iFrame 监听通过调用父级的放置处理函数及其位置等来响应。）这很有效，并且似乎对所有浏览器都很好。非常感谢！

没问题。我最近一直在“重新发明***”，比如拖放、调整大小、可折叠容器等。当然，所有常见框架都做得很好的东西，但我想学习如何去做并扩展我的 js过程中的剁手。最近我自己通过拖放解决了许多相同的问题，我很高兴我可以帮助其他人。

+1 提醒我注意选择预防需要放置在 mouseMove-handler 而不是 mouseDown-handler 中

【参考方案2】：

据我所知，拖动的元素必须位于鼠标指针下的其他元素之上。如果它会随着鼠标指针移动，它会阻止页面上的任何选择。

【讨论】：

这似乎不是真的。我正在使用的方法是一个 ghost 方法，我创建了一个对象的虚拟副本来拖动，并且它实际上并没有从旧页面中删除，直到成功放置。