移动鼠标时更改光标

Question

I'm having a strange error with trying to put a "moving" class on an element when moving/dragging the mouse. 在移动/拖动鼠标时尝试在元素上放置“移动”类时遇到一个奇怪的错误。 I'm using jQuery 3.1.1 on Chrome 59.0.3071.115. 我在Chrome 59.0.3071.115上使用jQuery 3.1.1。

I've simplified my problem down to this example: 我将问题简化为以下示例：

<html>
<head>
<style>
    .thing {
        display: block;
        width: 10em;
        height: 10em;
        background: green;
    }
    .moving {
        cursor: move;
    }
</style>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="thing"></div>
<script>
    $(document).ready(function(){
        var $thing = $('.thing');
        $thing.on('mousedown', function(e){
            $thing.addClass("moving");
            console.log("mousedown");
        }).on('mouseup', function(e){
            $thing.removeClass("moving");
            console.log("mouseup");
        });
    });
</script>
</body>
</html>

This will display a green box in the page, and fires events when you mouse-down and mouse-up on it. 这将在页面中显示一个绿色框，并在您的鼠标上下移动时触发事件。

What happens is... 发生什么事了

Click the green box -- The "moving" class gets applied to the div (this can be seen in the Chrome Developer Tools: Elements tab), but the cursor stays the usual arrow. 点击绿色框-“移动”类将应用于div （可在Chrome开发者工具：元素标签中看到），但光标停留在通常的箭头上。 I would expect the cursor to change to the move cursor. 我希望光标更改为move光标。
While holding down the click, drag a bit -- The cursor still remains the default arrow. 在按住点击的同时，拖动一点-光标仍然保持默认箭头。
Release the click while on the green div -- The cursor switches to the move cursor for a moment, but switches back to the default arrow if the mouse is moved at all. 在绿色div上释放单击-光标会暂时切换到move光标，但是如果完全移动鼠标，则会切换回默认箭头。

I've tried solutions like https://stackoverflow.com/a/16172027/1766230 , and others, without luck. 我已经尝试过https://stackoverflow.com/a/16172027/1766230之类的解决方案，还有其他运气不佳的解决方案。 I've tried various combinations of selectors in the CSS, various elements, etc. Strangely when attempting this in jsfiddle everything works correct, but with this content as a stand-alone HTML file, I see the error. 我在CSS，各种元素等中尝试了选择器的各种组合。奇怪的是，在jsfiddle中尝试此操作时，一切正常，但是使用作为独立HTML文件的内容，我看到了错误。

Edit 编辑

Turns out it must have been a browser bug, because when I closed Chrome and re-opened it, this began working as expected. 原来这一定是浏览器错误，因为当我关闭Chrome并重新打开它时，它开始按预期运行。 Is anyone aware of this kind of bug in Chrome? 有人知道Chrome中的这种错误吗？

Answer 1

Just an alternative : (without JS) 只是一种选择 ：（ 不带JS）

Use tabindex 使用tabindex
Selector is :active:hover 选择器是:active:hover

 .thing { display: block; width: 10em; height: 10em; background: green; user-select: none; outline: none; } .thing:active:hover { cursor: move; background: red; }

 <div class="thing" tabindex="1"></div>

Answer 2

drag != mousedown

Its a browser default dragging behaviour .Add the drag event with mousedown 它是浏览器的默认拖动行为。使用mousedown drag事件

 $(document).ready(function() { var $thing = $('.thing'); $thing.on('mousedown ,drag', function(e) { $thing.addClass("moving"); console.log("mousedown"); }).on('mouseup', function(e) { $thing.removeClass("moving"); console.log("mouseup"); }); });

 .thing { display: block; width: 10em; height: 10em; background: green; } .moving { cursor: move; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="thing"></div>

移动鼠标时更改光标

问题描述

Edit 编辑

2 个解决方案

解决方案1
1 2017-07-14 10:16:50

解决方案2
0 2017-07-14 05:11:28

移动鼠标时更改光标

问题描述

Edit 编辑

2 个解决方案

解决方案1 1 2017-07-14 10:16:50

解决方案2 0 2017-07-14 05:11:28

解决方案1
1 2017-07-14 10:16:50

解决方案2
0 2017-07-14 05:11:28