Question

每当用户在HTML文档上执行mousedown并在释放按钮之前拖动鼠标时，他正在移动的内容就会被选中。

我正在创建一个jquery滑块，我想取消此事件，以便当用户在鼠标悬停在文本上时用鼠标向下拖动鼠标时，文本不会被选中。

此示例有效：http://www.filamentgroup.com/examples/slider/index2.php

如果在光标位于“这是......的示例”文本上时启动了mousedown，则会选择文本。

但是，如果在光标位于滚动电梯上方时启动mousedown，然后将鼠标移到“这是......中的示例”文本上，则在您使用时不会选择文本将光标移到文本。

他们是如何取消选择文字的？

感谢。

Answer 1

仅CSS解决方案（将其添加到文本的css中）：

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

有关详细信息，请参阅this question。这是demo。

Answer 2

我建议创建一个CSS类，并在mousedown事件触发时将其添加到body元素，并在mouseup事件（或窗口blur事件）触发时将其删除：

CSS：

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none; /* From IE 10 */
   user-select: none;
}

JavaScript的：

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

function switchSelection(unselectable) {
    if (unselectable) {
        $("body").addClass("unselectable");
    } else {
        $("body").removeClass("unselectable");
    }
    switchUnselectable($("body")[0], unselectable);
}

var $sliderEl = $("#yourSliderId");

$sliderEl.mousedown(function() {
    switchSelection(true);
});

$sliderEl.mouseup(function() {
    switchSelection(false);
});

$(window).blur(function() {
    switchSelection(false);
});

Answer 3

<div onselectstart="return false;" ondragstart="return false;">
  Go ahead, just try to select me!
</div>

Here's an example!

Answer 4

如果您尝试创建滑块，则可以直接使用jQuery UI slider，除非您的应用程序需要一些不同的功能。希望这可以帮助。：\

Answer 5

最直接的解决方案是防止mousedown事件的默认设置，我怀疑这是链接页面使用的内容。您通常可以在开始跟踪滑块上的鼠标移动的同一事件处理程序中执行此操作。例如，假设jQuery：

$slider.mousedown(function(e){
    e.preventDefault();
    // Start tracking mouse movement
});

一些较新的浏览器具有执行相同工作的CSS属性（在其他答案中有描述），但这是最简单且使用最广泛的技巧。

加成！

您可以通过从事件处理程序返回false 来完成相同的操作。这要求jQuery为您阻止事件的默认，并停止将事件传播到父节点上的事件处理程序。

jquery取消选择事件

5 个答案:

加成！