当前位置:  开发笔记 > 编程语言 > 正文

防止在HTML中进行选择

如何解决《防止在HTML中进行选择》经验,为你挑选了3个好方法。

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



1> Tim Down..:

专有变体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中的属性进行设置:

...

遗憾的是,这个属性不是继承的,这意味着你必须在一个内部的每个元素的开始标记中放置一个属性

.如果这是一个问题,您可以使用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"));



2> molokoloco..:

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

HTML:

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



3> kennebec..:

我使用cancelBubble=truestopPropagation()在鼠标中向下移动处理程序.


让我感到困惑的是,你需要它在_鼠标下方并移动处理程序,而不仅仅是移动处理程序!
推荐阅读
mylvfamily
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有