修改

Question

我在尝试放置＆＃34;移动＆＃34;时遇到了一个奇怪的错误。移动/拖动鼠标时元素上的类。我在Chrome 59.0.3071.115上使用jQuery 3.1.1。

我已将问题简化为此示例：

<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>

这将在页面中显示一个绿色框，并在您向下鼠标并向上鼠标按下时触发事件。

会发生什么......

点击绿色框 - ＆＃34;移动＆＃34; class被应用于div（这可以在Chrome开发者工具：元素选项卡中看到），但光标保持常用箭头。我希望光标更改为move光标。
在按住单击的同时，拖动一下 - 光标仍然是默认箭头。
在绿色div上释放单击 - 光标暂时切换到move光标，但如果鼠标完全移动则切换回默认箭头。

我已尝试过像https://stackoverflow.com/a/16172027/1766230这样的解决方案，而其他人则没有运气。我在CSS，各种元素等中尝试了各种选择器组合。奇怪的是，在jsfiddle中尝试这一切时，一切正常，但是将这些内容作为独立的HTML文件，我看到了错误。

修改

原来它一定是浏览器的错误，因为当我关闭Chrome并重新打开它时，它开始按预期工作。有人知道Chrome中存在这种错误吗？

Answer 1

只是一个替代：（没有JS）

使用tabindex
选择器为:active:hover

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

drag != mousedown

它是浏览器默认的拖动行为。使用drag添加mousedown事件

＆＃13;

$(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");
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

移动鼠标

修改

2 个答案: