禁止在HTML中选择

82

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

javascript html selection

— 塔
source

166

的专有变体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 <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"));

— 蒂姆·唐
source

它未被选中，但仍被复制到剪贴板（根据goo.gl/5P8uH上的MDC规范）

— ithkuil 2010年

@ithkuil：有趣。看起来-moz-none是要走的路。我会修改答案。

— Tim Down

在Firefox 5中，-moz-noneFirebug似乎无法自动完成，尽管它none是：（-moz-user-select: none有效）

— Lekensteyn

@Lekensteyn：两者都可以防止选择，但是在概念上有区别：developer.mozilla.org/en/CSS/-moz-user-select。但是，以下内容似乎并未在Firefox 5中得到支持：jsfiddle.net/vhwJ5/2。

— 蒂姆·唐

我敢肯定，user-select只有文字，没有其他元素的种类交易

— oldboy

10

看来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;
    });
});

— 莫洛可洛科
source

您可以使用“ img”选择器，但请谨慎使用“ event.preventDefault（）;” 因为没有其他与“ mousedown”相关的事件将在您的页面上

— 起作用

5

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

— 肯尼贝克
source

2

让我感到困扰的是，您既需要鼠标按下又需要移动处理程序，而不仅仅是移动程序！

— 马修·申克尔

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

— 叶
source

谢谢您的帮助，搜索了一段时间以阻止选择的正确方法我列出了我在点击时被阻止的列表，因为禁用值不会发布.....哈哈

— thekevshow

1

您有选择的某种透明图像吗？通常，拖动图像时会出现“下降”图标。否则，通常在拖动时会选择文本。如果是这样，您可能必须使用z-index将图像放在所有内容的后面。

— 米歇尔·西尚（Michal Ciechan）
source