Question

突出显示此网页上的某些文字，然后基本上点击文档的任意位置。您的选择将消失。

当用户通过CSS或Javascript点击特定元素时，有没有办法阻止此行为？

E.g：

var element = document.getElementById("foo");
foo.onclick = function(e){
   //some magic here that prevents deselection from occuring
}

或

foo.style.preventDeselect = "true";

编辑：也许我可以存储选择，然后在“鼠标点击”恢复选择后？有没有办法存储选择，然后重新选择呢？

谢谢！

Answer 1

“return false”以及onmousedown中的“e.preventDefault（）”在FF和Safari中有效，但不是IE。据我所知，IE的唯一解决方案是抛出错误。

这适用于所有浏览器（但在IE中导致错误，因为preventDefault不是方法）：

//clicking the 'test' element will not deselect text.
var test = document.getElementById("test");
test.onmousedown = function(e){
  e = e || window.event;
  e.preventDefault();
}

如果可能，我仍然希望在IE中无错误地执行此操作

感谢Paolo Bergantino的“onmousedown”提示。

Answer 2

这适用于我的Firefox，虽然没有尝试过IE。选择文本后，尝试单击foo.style.preventDeselect = "true";行。使用mousedown事件。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('#test').mousedown(function() {
        return false;
    });
});
</script>
<body>

Highlight some text on this webpage, then click basically anywhere on the document. Your selection will disappear.<br><Br>

Is there a way to prevent this behavior when the user clicks on a specific element, either by CSS or Javascript?<br><Br>

E.g.:<br><Br>

var element = document.getElementById("foo");<br>
foo.onclick = function(e){<br>
   //some magic here that prevents deselection from occuring<br>
}<br><Br>

or<br><Br>

<span id='test'>foo.style.preventDeselect = "true";</span><br><Br>

Thanks!<br><Br>

</body>
</html>

Answer 3

这种行为虽然在现代浏览器中大多是通用的，但它是特定于浏览器/实现的，几乎与CSS或Javascript完全无关。特别要注意的是，Firefox为整个页面和文本框的内容维护了单独的选择状态，而IE则不这样做。更糟糕的是，考虑使用单独的鼠标和键盘选择接口的文本模式浏览器。

Answer 4

怎么样？

if(e.preventDefault) 
    e.preventDefault();
else
    e.returnValue = false;

Answer 5

为了防止有人检查出来，我遇到了类似的问题。我需要在通过单击工具栏按钮（带有background-image的span）触发的一段选定文本上运行一些javascript。我通过使用href为“javascript：void（0）”将跨度更改为锚来解决我的问题。这阻止了我选择的文本被取消选择。

Answer 6

我想出如何做到这一点的最好方法是，对于IE，你需要在'onselectstart'上设置一个监听器。对于Mozilla和其他浏览器，您可以使用'mousedown'。 如果您不在网站的任何其他部分使用“mousedown”，这只会有效！

段： YUI方式： FF浏览器：

YAHOO.util.Event.addListener（窗口， 'mousedown'，function（evt）{ YAHOO.util.Event.preventDefault（EVT）; }）;

IE浏览器：在IE中，您不允许在窗口上设置此侦听器，因为在IE中它不起作用。最好的办法是在你的body元素上设置一个class元素，然后引用它，然后应用该元素对象的监听器。
//按类获取元素分配给 var bar YAHOO.util.Event.addListener（酒吧， 'selectstart'，function（evt）{ YAHOO.util.Event.preventDefault（EVT）; }）;

如果你想以简单的方式去做，只需做

window.onMouseDown = function（） {return false;}

或IE

body.onSelectStart = function（） {return false;}

希望这有帮助。

有什么方法可以阻止突出显示文本的“取消选择”？

6 个答案: