Any way to prevent “deselection” of highlighted te

2019-01-25 10:56发布

站内问答 / JavaScript
1693 6 6

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

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

E.g.:

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

or

foo.style.preventDeselect = "true";

Edit: Perhaps I could store the selection, then after "mouseclick" restore the selection? Is there a way to store aselection, and then reselect it?

Thanks!

6条回答
做个烂人
2楼-- · 2019-01-25 11:41

"return false" as well as "e.preventDefault()" in onmousedown works in FF and Safari, but not IE. The only solution for IE, as far as I can tell, is to throw an error.

This works in all browsers (but causes an error in IE, since preventDefault is not a method):

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

I'd still like to do this error-free in IE, if possible

Thanks to Paolo Bergantino for the the "onmousedown" tip.

查看更多
0人赞 添加讨论(0) 举报
乱世女痞
3楼-- · 2019-01-25 11:42

This behavior, while mostly universal in modern browsers, is browser/implementation specific and almost completely unrelated to CSS or Javascript. In particular, note that Firefox maintains separate selection states for the page at large and the contents of text boxes, while IE does not do this. Even worse, consider text-mode browsers with separate mouse and keyboard selection interfaces.

查看更多
0人赞 添加讨论(0) 举报
冷血范
4楼-- · 2019-01-25 11:49

This works for me on Firefox, haven't tried IE though. Try clicking on the foo.style.preventDeselect = "true"; line when you have text selected. Uses the mousedown event.

<!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>
查看更多
0人赞 添加讨论(0) 举报
【Aperson】
5楼-- · 2019-01-25 11:58

the best way that I figured out how to do this is, for IE you need to setup a listener on 'onselectstart'. For Mozilla and other browsers you can do on 'mousedown'. This will only work, if you don't use 'mousedown' in any other portion of your site!

Snippet: YUI way: FF browser:

  • YAHOO.util.Event.addListener(window, 'mousedown', function(evt) { YAHOO.util.Event.preventDefault(evt); });

    IE Browser: In IE you are not allowed to set this listener on window, since in IE it doesn't work. best thing to do is on your body element set a class element, then reference it, and apply the listener to that element object.

  • // Get the element by class and assign to var bar YAHOO.util.Event.addListener(bar, 'selectstart', function(evt) { YAHOO.util.Event.preventDefault(evt); });

if you want to do it the easy way, just do

  • window.onMouseDown = function() {return false;}

or for IE

  • body.onSelectStart = function() {return false;}

Hope this helps.

查看更多
0人赞 添加讨论(0) 举报
Bombasti
6楼-- · 2019-01-25 12:01

What about 

if(e.preventDefault) 
    e.preventDefault();
else
    e.returnValue = false;
查看更多
0人赞 添加讨论(0) 举报
爷的心禁止访问
7楼-- · 2019-01-25 12:01

Just in case somebody checks this out, I had a similar problem. I needed to run some javascript on a piece of selected text that was fired by clicking on a toolbar button (span with background-image). I solved my problem by changing the spans to anchors with an href of "javascript:void(0)". That prevented my selected text from being deselected.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)