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事件之前完成它.我在mouseover事件中做到了,因为只要鼠标进入我的元素,我就希望它可以拖动,而不是可选择的.然后你可以把

document.onselectstart = null;

调用mouseout事件.然而,有一个问题.拖动时,可能会调用mouseover/mouseout事件.为了解决这个问题,在dragging/mousedown事件中,将flag_dragging设置为true,并在拖动停止时将其设置为false(mouseup).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

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

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

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

Answer 6

我在使用 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 代码中的修复，所以基本上它可能会破坏某些东西。