Issue
I have an HTML document. It needs to work across as many browsers as possible.
I block selecting on some items, specifically those contained in a div. That works, it doesn't get selected. But when you click inside that div and then drag the pointer outside, selecting continues to happen OUTSIDE of the div, and you see the blue selection box, etc.
I need that not to happen.
I need it so that:
if you click outside of the box (starting outside the box) you can select/drag as normal, including around (but not in) the box. Frankly the behaviour I have here is fine.
if you click inside of the box you cannot select or drag, even if you go outside of the box.
See example below - when you click inside the box and then move the mouse the contents of the box are not selected (in my production code the boxes don't even get highlighted) but everything between them does.
(Note that there may be one or more divs - in the example below I have 3).
I've tried a load of things - cancelling the mousedown of various elements, cancelling the selectstart of various elements AND the body (including in the capture phase rather than the bubble), etc. etc. It still happens.
I'm particularly confused that cancelling the selectstart on the body does not work (at least in Chrome, probably others). I have given the sample code I use for that (excluding the logic for catching if we started in the box).
I am sure this is possible - if you open youtube and try to click/hold on the position slider of the video, then move/drag outside the video box, nothing gets selected.
I'm probably missing something obvious - I'm tying myself in knots here - but can anyone help?
PS Yes I know the code's not great, it's a cut-down version of my full code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.Box
{
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-webkit-touch-callout: none;
-webkit-user-drag: none;
background-color: white;
border-color: rgb(204, 204, 204);
border-style: solid;
border-width: 4px;
}
</style>
</head>
<body>
<div id="Box1" class="Box" unselectable="on" style="width:400px; height:100px;">Box1</div>
<br />
<div id="Box2" class="Box" unselectable="on" style="width:400px; height:100px;">Box2</div>
<br />
<div id="Box3" class="Box" unselectable="on" style="width:400px; height:100px;">Box3</div>
<br />
<script>
this.blockSelect = function()
{
// for ie < 10
var box1 = document.getElementById('Box1');
var box2 = document.getElementById('Box2');
var box3 = document.getElementById('Box3');
box1.onselectstart = function() {
return false;
};
box2.onselectstart = function() {
return false;
};
box3.onselectstart = function() {
return false;
};
}
blockSelect();
</script>
</body>
</html>
Capture cancelling:
this.cancelBubble = function(e)
{ // called from within an event, and passes that as e
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
this.eventDocOnSelectStart = function(e)
{
if (true)
{
cancelBubble(e);
return false;
}
};
document.body.addEventListener("selectstart", this.eventDocOnSelectStart, true);
Solution
Add user-select: none; on body while mouse is hovering the box.
Answered By - Robin Dorbell
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.