在不移动时更改光标

Question

因此，我有一个Web应用程序（在html，css和javascript，jquery中），可在其中拖动一个元素（这意味着，光标不会在该元素上移动，因为该元素随光标一起移动）。 我希望将光标更改为“移动”光标，但是遇到这种奇怪的行为。 我写了这段代码来演示：

<html>
<head></head>
<body oncontextmenu="return false;">
    <script>
        var b=document.getElementsByTagName('body')[0];
        b.onmousedown=function(event){
            if(event.button){
                b.style.cursor='move';
            }
        }
        b.onmouseup=function(event){
            if(event.button){
                b.style.cursor='initial';
            }               
        }
    </script>
</body>
</html>

所以基本上，我希望光标更改为“ cursor：move;”。 每当用户按住鼠标右键时； 但是，发生以下情况：

初始：光标：默认
鼠标向下：光标：默认
鼠标移动：光标：默认
鼠标向上：光标：移动
鼠标移动：光标：默认

所以现在我的问题是：为什么会发生这种情况，什么是解决它的好方法？

PS：经过chrome测试，这是我需要使用的主要浏览器

Answer 1

http://jsbin.com/vepihik/edit?html,css,js,output

 document.addEventListener('mousedown', onMouseAction) document.addEventListener('mouseup', onMouseAction) function onMouseAction(e){ document.body.style.cursor = e.buttons && e.button == 2 ? 'move' : 'default'; }

 html, body{ height:100%; }

 Try to hold the RIGHT mouse button and move it, then release

将mousedown和mouseup事件附加到文档本身，并使它们都调用相同的函数，只需检查单击的按钮即可。 在您的情况下为right = 2 。

Answer 2

您可以附加mousedown和mouseup事件来启动将更改和还原光标的功能。

在每个功能中，您可以确认刚刚按下（或释放）的按钮是鼠标右键。

工作示例：

 var div = document.getElementsByTagName('div')[0]; function changeCursorToMove(event) { if ((event.which === 3) || (event.button === 2)) { div.classList.add('move-cursor'); } } function changeCursorToDefault(event) { if ((event.which === 3) || (event.button === 2)) { div.classList.remove('move-cursor'); } } div.addEventListener('mousedown', changeCursorToMove, false); div.addEventListener('mouseup', changeCursorToDefault, false); document.oncontextmenu = function(){return false;}

 div { width: 100px; height: 100px; background-color: red; } .move-cursor { cursor: move; }

 <div></div>

在不移动时更改光标

问题描述

2 个解决方案

解决方案1
1 已采纳 2017-03-01 10:59:49

解决方案2
1 2017-03-01 12:01:33

在不移动时更改光标

问题描述

2 个解决方案

解决方案1 1 已采纳 2017-03-01 10:59:49

解决方案2 1 2017-03-01 12:01:33

解决方案1
1 已采纳 2017-03-01 10:59:49

解决方案2
1 2017-03-01 12:01:33