Question

在Chrome中（我在Win 7上使用版本16.0.912.75米）我发现无论我将光标设置为什么，只要我按住鼠标左键并移动光标，光标类型就是更改为text（即使页面上没有任何文字）。

这是一个错误吗？有没有人知道如何解决它，因为它使我的拖放工具看起来有点傻！

JSFiddle：http://jsfiddle.net/KJfbs/

修改

如下面的@davgothic所述，添加-webkit-user-select: none;将在没有文字时解决问题。但是，如果我们绝对定位元素并将文本置于其后面，则问题仍然存在。

JSFiddle：http://jsfiddle.net/KJfbs/2/

Answer 1

尝试将-webkit-user-select: none;添加到该元素的CSS中，以防止文本选择。

示例：http://jsfiddle.net/KJfbs/1/

我个人也会添加这些...

-webkit-user-select: none;
 -khtml-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
     -o-user-select: none;
        user-select: none;

...用于跨浏览器兼容性。

Answer 2

我认为使用-webkit-user-select：none;如果您在页面中放入任何其他内容，问题仍然存在。例如：http://jsfiddle.net/KJfbs/237/

无论如何，我认为jQuery preventDefault在任何情况下都解决了这个问题： http://jsfiddle.net/KJfbs/241/

preventDefault避免了更改为光标文本的默认行为然后我可以控制并放置我想要的任何光标：$（this）.css（＆＃34; cursor＆＃34;，＆＃34; wait＆＃34;）;

JQUERY：

$(function(){
    $('#lime').mousedown(function(e) {
        e.preventDefault();
        $(this).css("cursor","wait"); 
    }).on('mouseup mouseleave', function() {
        $(this).css("cursor","default");
    }); 
});

HTML：

<div id="lime"></div>
<p>Lorem ipsum dolor sit amet</p>

CSS：

#lime {
    background-color: lime;
    height: 100px; width: 300px;
    cursor: wait;
    position: absolute;
    top: 0; left: 0;
}

Chrome bug？鼠标向下移动+移动光标

2 个答案: