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

Posted 2023-02-22

【中文标题】Chrome在拖动时将光标设置为文本，为啥？

【英文标题】：Chrome sets cursor to text while dragging, why?Chrome在拖动时将光标设置为文本，为什么？

【发布时间】：2011-02-14 06:14:11

【问题描述】：

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

【问题讨论】：

这个问题的描述性很充分。即使在被拖动的元素上设置了自定义光标，Chrome 也会在拖动时将光标覆盖到文本选择光标。 JSFiddle 会很好，但不需要代​​码来解释问题。

【参考方案1】：

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

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

e.originalEvent.preventDefault();

【讨论】：

+10 我喜欢这个解决方案的简单性，以及它的工作原理。比附加和分离鼠标或选择事件要好得多。

@ChrisNolet 好吧，公平地说，这与我的解决方案完全相同。我只是添加了一个如何附加事件处理程序的示例。 Tim 是用 jQuery 做的，这在他的代码中没有记录，因此它看起来更短。您仍然需要在某处附加 mousedown 事件才能使其正常工作。

@Lorenzo。看看 SO web 编程主题，我的印象是 80% 的人都在使用 jQuery。

当我将 preventDefault() 添加到 mousedown 处理程序时，无法再拖动元素。有什么解决办法吗？

@lyxio 如果您不使用 jquery，这将不起作用。 Jquery 有自己的事件，但这个解决方案将阻止默认值附加到原始 javascript 事件，只留下 jquery onmousedown，所以拖动仍然触发

【参考方案2】：

尝试关闭文本选择事件。

document.onselectstart = function() return false; 

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

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

document.onselectstart = function() return true; 

【讨论】：

嘿，谢谢你的回复，但我也试过了。但它对我不起作用。 :(

我不明白为什么这个答案得到了如此多的支持。这不是正确的方法。您需要精细选择要应用此行为的元素，然后阻止 mousedown 事件的默认操作。见这里：***.com/questions/2745028/…

远没有@tim 的解决方案那么简单——甚至 Lorenzo 的解决方案也有点复杂。只需按照 tim 的建议将 e.originalEvent.preventDefault(); 放入 mouseDown 即可。

@ChrisNolet 请查看我对蒂姆回答的评论

-1 因为这是不必要的，影响太多超出范围，并且不起作用。

【参考方案3】：

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

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

【讨论】：

+1 没有多少人认识到您的答案与我的相同，除了您的答案与插件无关。由于很多人在编写 Web 应用程序时都使用 jquery，所以我通常假设使用 jquery，即使问题是通用的。

@JosephLennox 如果有人出于某种原因仍需要支持 IE8：w3schools.com/browsers/browsers_explorer.asp

@LorenzoPolidori 我绝对同意一般网站不应该针对 IE8 支持。可悲的是，在一些办公室，他们也可能会签你的薪水，IE8 的使用率为 100%。

【参考方案4】：

陷阱

你不能放

document.onselectstart = function() return false; ;

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

解决方案

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

document.onselectstart = null;

调用 mouseout 事件。但是，有一个问题。拖动时，可能会调用 mouseover/mouseout 事件。为了解决这个问题，在您的拖动/mousedown 事件中，将 flag_dragging 设置为 true，并在拖动停止（mouseup）时将其设置为 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;
    
);

【讨论】：

谢谢。就我的目的而言，mouseenter 和 mouseleave 是我想要的，因为在我的元素中拖动时会不断触发 mouseover。

【参考方案5】：

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

* 
    -webkit-user-select: none; 


.your-class:active 
    cursor: crosshair;

【讨论】：

这个很好用，你可以添加input -webkit-user-select: auto; 之类的东西让用户在输入框中选择文本。

获得完整答案：您需要添加 e.preventDefault()，因为在 WebKit 中拖动的默认操作是选择。

这解决了我的问题 where e.originalEvent.preventDefault();没有。

【参考方案6】：

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

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

现在它工作正常。希望对您有所帮助。

【参考方案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 代码中的修复，所以基本上它可能会破坏一些东西。

【讨论】：

您好，感谢您的回复，但我没有使用任何 javascript 库。所以它不能帮助我:(

【参考方案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;

【讨论】：

感谢这很好用！ arguments[0].preventDefault(); 已经足够了。