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

My application has many drag and drop features. While dragging I want the cursor to change to some grab cursor. Internet Explorer and Firefox work fine for this, but Chrome always changes the cursor to the text cursor.

我的应用程序有许多拖放功能。拖动时我希望光标变为一些抓取光标。 Internet Explorer和Firefox可以正常工作，但Chrome总是将光标更改为文本光标。

8 个解决方案

#1

None of these solutions worked for me because it's too much code.

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

I use a custom jQuery implementation to do the drag, and adding this line in the mousedown handler did the trick for me in Chrome.

我使用自定义jQuery实现来执行拖动，并在mousedown处理程序中添加此行在Chrome中为我做了诀窍。

e.originalEvent.preventDefault();

#2

Try turning off text selection event.

尝试关闭文本选择事件。

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

This will disable any text selection on the page and it seems that browser starts to show custom cursors.

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

But remember that text selection will not work at all, so it's the best to do it only while dragging, and turn it on again just after that. Just attach function that doesn't return false:

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

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

#3

If you want to prevent the browser from selecting text within an element and showing the select cursor, you can do the following:

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

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

#4

Pitfall

You cannot put the

你不能把

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

into your "mousedown" handler because onselectstart has already been triggered.

进入你的“mousedown”处理程序，因为onselectstart已被触发。

Solution

Thus, to have it working, you need to do it before the mousedown event. I did it in the mouseover event, since as soon as the mouse enters my element, I want it to be draggable, not selectable. Then you can put the

因此，为了让它工作，你需要在mousedown事件之前完成它。我是在mouseover事件中完成的，因为只要鼠标进入我的元素，我就希望它可以拖动，而不是可选择的。然后你可以把

document.onselectstart = null;

call into the mouseout event. However, there's a catch. While dragging, the mouseover/mouseout event might be called. To counter that, in your dragging/mousedown event, set a flag_dragging to true and set it to false when dragging stops (mouseup). The mouseout function can check that flag before setting

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

document.onselectstart = null;

Example

I know you are not using any library, but here's a jQuery code sample that might help others.

我知道你没有使用任何库，但这里有一个可能对其他人有帮助的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;
    }
});

#5

I solved a same issue by making the Elements not selectable, and adding an active pseudo class on the draged elements:

我通过使Elements不可选，并在draged元素上添加一个活动的伪类来解决同样的问题：

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

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

#6

I have a similar issue using jQuery UI draggable and sortable (ver. 1.8.1), and it's quite specific, so I assume that you are using same library.

我有一个类似的问题使用jQuery UI draggable和sortable（版本1.8.1），它是非常具体的，所以我假设你使用相同的库。

Problem is caused by a bug in jQuery UI (actually a fix for other Safari bug). I just raised the issue in jQuery UI http://dev.jqueryui.com/ticket/5678 so I guess you will need to wait till it's fixed.

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

I've found a workaround for this, but it's quite hard-core, so you only use it if you really know what is going on ;)

我已经为此找到了一个解决方法，但它非常坚固，所以如果你真的知道发生了什么，你只能使用它;）

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

It simply switches off the fix that's in jQuery UI code, so basically it may break something.

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

#7

Just use this line inside your mousedown event

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

arguments[0].preventDefault();

You can also disable text selection by CSS adding this class to your draggable element

您还可以通过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;
}

#8

I was facing almost same problem. I want cursor inside my DIV element and all its child to be the default, the CSS tips here helped in IE, FF and Opera, but not for Google Chrome. Here is what I have done in parent DIV:

我面临着几乎同样的问题。我希望我的DIV元素中的光标和它的所有子元素都是默认值，这里的CSS提示有助于IE，FF和Opera，但不适用于谷歌Chrome。这是我在父DIV中所做的：

<div ... onselectstart="return false;" ... > ... </div>

......

Now it is working fine. Hope this help.

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