Question

我有一个HTML文档。它需要在尽可能多的浏览器中工作。

我阻止选择某些项目，特别是div中包含的项目。这有效，它没有被选中。但是当你点击里面那个div然后将指针拖到外面时，选择继续发生在div的外面，你会看到蓝色的选择框等。

我需要不发生这种情况。

我需要它以便：

如果您在框外单击（从框外部开始），您可以正常选择/拖动，包括框（但不在框内）。坦率地说，我在这里的行为很好。
如果您在框内单击，则无法选择或拖动，即使您走出框外。

请参阅下面的示例 - 当您在框内单击然后移动鼠标时，未选中框的内容（在我的生产代码中，框甚至没有突出显示）但它们之间的所有内容都是。

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

我尝试过很多东西 - 取消各种元素的moused，取消各种元素和身体的选择开始（包括捕捉阶段而不是泡沫）等等。它仍然会发生。

我特别困惑的是，取消身体上的选择启动功能不起作用（至少在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);

Answer 1

当鼠标悬停在框中时，在user-select: none;上添加body。

在div上阻止选择允许在div周围选择

1 个答案: