Chrome 在拖动时将光标设置为文本，为什么？

Question

我的应用程序有许多拖放功能。拖动时我希望光标更改为某种抓取光标。 Internet Explorer 和 Firefox 对此工作得很好，但 Chrome 总是将光标更改为文本光标。

Answer 1

这些解决方案都不适合我，因为代码太多。

我使用自定义 jQuery 实现来进行拖动，并在 mousedown 处理程序中添加这一行，在 Chrome 中为我解决了这个问题。

e.originalEvent.preventDefault();

Answer 2

尝试关闭文本选择事件。

document.onselectstart = function(){ return false; }

这将禁用页面上的任何文本选择，并且浏览器似乎开始显示自定义光标。

但请记住，文本选择根本不起作用，因此最好仅在拖动时执行此操作，然后立即再次打开它。只需附加不返回 false 的函数：

document.onselectstart = function(){ return true; }

Answer 3

如果您想阻止浏览器选择元素内的文本并显示选择光标，您可以执行以下操作：

element.addEventListener("mousedown", function(e) { e.preventDefault(); }, false);

Answer 4

陷阱

您不能将 放入

document.onselectstart = function(){ return false; };

“mousedown”处理程序中，因为 onselectstart 已经被触发。

解决方案

因此，要使其正常工作，您需要在 mousedown 事件之前执行此操作。我在鼠标悬停事件中做到了这一点，因为一旦鼠标进入我的元素，我希望它是可拖动的，而不是可选择的。然后您可以将

document.onselectstart = null;

调用放入 mouseout 事件中。然而，有一个问题。拖动时，可能会调用 mouseover/mouseout 事件。为了解决这个问题，在拖动/鼠标按下事件中，将 flag_dragging 设置为 true，并在拖动停止（鼠标松开）时将其设置为 false。 mouseout 函数可以在设置之前检查该标志

document.onselectstart = null;

示例

我知道您没有使用任何库，但这里有一个可能对其他人有帮助的 jQuery 代码示例。

var flag_dragging = false;//counter Chrome dragging/text selection issue
$(".dragme").mouseover(function(){
    document.onselectstart = function(){ return false; };
}).mouseout(function(){
    if(!flag_dragging){
        document.onselectstart = null;
    }
});

//make them draggable
$(".dragme").draggable({
    start: function(event, ui){
        flag_dragging = true;
    }, stop: function(event, ui){
        flag_dragging = false;
    }
});

Answer 5

我通过使元素不可选择并在拖动的元素上添加活动伪类解决了同样的问题：

* {
    -webkit-user-select: none; 
}

.your-class:active {
    cursor: crosshair;
}

Answer 6

我面临着几乎同样的问题。我希望我的 DIV 元素及其所有子元素中的光标成为默认值，此处的 CSS 提示在 IE、FF 和 Opera 中有所帮助，但不适用于 Google Chrome。这是我在父 DIV 中所做的操作：

> ...

现在它工作正常。希望这有帮助。

Answer 7

我在使用 jQuery UI 可拖动和可排序（版本 1.8.1）时遇到了类似的问题，而且它非常具体，所以我假设您使用的是相同的库。

问题是由 jQuery UI 中的错误引起的（实际上是对其他 Safari 错误的修复）。
我刚刚在 jQuery UI http://dev.jqueryui.com/ticket/5678 所以我想你需要等到它修复为止。

我已经找到了解决此问题的方法，但它非常核心，因此只有在您真正知道发生了什么时才使用它；）

if ($.browser.safari) {
    $.ui.mouse.prototype.__mouseDown = $.ui.mouse.prototype._mouseDown;
    $.ui.mouse.prototype._mouseDown = function(event){
        event.preventDefault();
        return $.ui.mouse.prototype.__mouseDown.apply(this, arguments);
    }
}

它只是关闭 jQuery UI 代码中的修复，所以基本上它可能打破一些东西。

Answer 8

只需在您的 mousedown 事件中使用此行

arguments[0].preventDefault();

您还可以通过 CSS 将此类添加到可拖动元素来禁用文本选择

.nonselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}