Question

我在HTML页面上有一个div，每当我按下鼠标并移动它时，它会显示“不能掉落”光标，就像选择一些东西一样。有没有办法禁用选择？我试过CSS用户选择没有成功。

Answer 1

user-select的专有变体适用于大多数现代浏览器：

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

对于IE＆lt; 10和Opera，您需要使用您希望不可选择的元素的unselectable属性。您可以使用HTML中的属性设置此项：

<div id="foo" unselectable="on" class="unselectable">...</div>

遗憾的是，此属性未被继承，这意味着您必须在<div>内的每个元素的开始标记中放置一个属性。如果这是一个问题，您可以使用JavaScript以递归方式为元素的后代执行此操作：

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Answer 2

似乎CSS用户选择不会阻止图像拖放...所以..

HTML：

<img src="ico.png" width="20" height="20" alt="" unselectable="on" /> Blabla bla blabla

CSS：

* {
     user-select: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

::selection { background: transparent;color:inherit; }
::-moz-selection { background: transparent;color:inherit; }

JS：

$(function(){
    $('*:[unselectable=on]').mousedown(function(event) {
        event.preventDefault();
        return false;
    });
});

Answer 3

我在鼠标中使用cancelBubble=true和stopPropagation()并移动处理程序。

Answer 4

event.preventDefault()似乎可以解决问题（在IE7-9和Chrome中测试过）：

jQuery('#slider').on('mousedown', function (e) {
    var handler, doc = jQuery(document);
    e.preventDefault();
    doc.on('mousemove', handler = function (e) {
        e.preventDefault();
        // refresh your screen here
    });
    doc.one('mouseup', function (e) {
        doc.off('mousemove', handler);
    });
});

Answer 5

你有选择的某种透明图像吗？通常，拖动图像时会出现“不能掉落”图标。否则，它通常在您拖动时选择文本。如果是这样，你可能不得不使用z-index将图像放在一切。

防止在HTML中进行选择

5 个答案: