jquery取消选择事件答案

【问题标题】：jquery cancelling select eventjquery取消选择事件
【发布时间】：2011-03-25 20:10:14
【问题描述】：

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

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

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

如果您在光标位于“This is an example from the...”文本上时开始鼠标按下，则该文本被选中。

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

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

谢谢。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我建议创建一个 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);
});

【讨论】：

【解决方案2】：

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

Here's an example!

【讨论】：

EWWWW，内联 Javascript。必须有办法使用 jQuery 来避免这种情况。

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

奖金！

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

【讨论】：