阻止选择一个div允许选择一个div

我有一个HTML文档。它需要在尽可能多的浏览器上工作。阻止选择一个div允许选择一个div

我阻止选择某些项目，特别是包含在div中的项目。这有效，它没有被选中。但是，当你点击内该分区，然后拖动指针外，选择继续在div之外的事情发生，你看到蓝色的选择框等

我需要不发生。

我需要它，以便：

如果单击框外（禁区外开始），您可以选择/阻力为正常，包括周围（但不是）框。坦率地说，我在这里的行为很好。
如果您单击框内部，即使您不在框中，也不能选择或拖动。

参见下面的例子 - 当你点击方框内，然后移动都没有选择框的内容鼠标（在我的生产代码的箱子甚至没有得到突出显示），但他们之间的一切一样。

（请注意，可能有一个或多个div - 在下面的示例中，我有3个）。

我已经尝试了一大堆东西 - 取消各种元素的mousedown，取消各种元素和body（包括捕获阶段而不是泡泡）的selectstart等等。它仍然会发生。

我特别困惑的是，取消身体上的selectstart不起作用（至少在Chrome中，可能是其他人）。我已经给出了我使用的示例代码（不包括如果我们开始在框中捕获的逻辑）。

我相信这是可能的 - 如果您打开YouTube并尝试点击/按住视频的位置滑块，然后移动/拖动到视频框外部，则不会选择任何内容。

我可能错过了一些明显的东西 - 我在这里打结 - 但任何人都可以帮忙吗？

PS是的我知道代码不是很好，它是我完整代码的精简版。

<!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>

捕捉取消：

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);

来源

2015-11-25 James Carlyle-Clarke

您是否尝试过使用'user-select：none;'为正文？ –

我用@RobinDorbell来为全身的'user-select：none'。然后通过添加一个允许选择的类，就可以更容易地仅允许选择您需要的元素。 –

但我需要__一切，除了那些可选的框。 –

上body添加user-select: none;而鼠标悬停框。

来源

2015-12-01 16:38:20

这工作。当鼠标滑过框时添加了一个类，并在鼠标在文档中的任何位置上移时将其删除。认为它可能需要调整其他浏览器，例如添加不可选属性，等等。非常感谢。 –

阻止选择一个div允许选择一个div

回答

相关问题