在不移动时更改光标

Question

so I have a webapplication (in html,css and javascript, jquery) that drags an element around (meaning, the cursor doesn't move over that element since the element is moving with the cursor). 因此，我有一个Web应用程序（在html，css和javascript，jquery中），可在其中拖动一个元素（这意味着，光标不会在该元素上移动，因为该元素随光标一起移动）。 I wish to change the cursor to a 'move' cursor, but I'm encountering this weird behaviour. 我希望将光标更改为“移动”光标，但是遇到这种奇怪的行为。 I wrote this bit of code to demonstrate: 我写了这段代码来演示：

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

So basically, I want the cursor to changing to 'cursor:move;' 所以基本上，我希望光标更改为“ cursor：move;”。 whenever the user is holding the right mouse button; 每当用户按住鼠标右键时； But, the following happens: 但是，发生以下情况：

initial: cursor: default 初始：光标：默认
mouse down: cursor: default 鼠标向下：光标：默认
mouse move: cursor: default 鼠标移动：光标：默认
mouse up: cursor: move 鼠标向上：光标：移动
mouse move: cursor: default 鼠标移动：光标：默认

so now my question is: why does this happen, and what would be a good way to fix it? 所以现在我的问题是：为什么会发生这种情况，什么是解决它的好方法？

PS: tested in chrome, this is the main browser I need this to work in PS：经过chrome测试，这是我需要使用的主要浏览器

Answer 1

http://jsbin.com/vepihik/edit?html,css,js,output 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

Attaching the mousedown and mouseup events on the document itself and making them both call the same function which simply check the button clicked. 将mousedown和mouseup事件附加到文档本身，并使它们都调用相同的函数，只需检查单击的按钮即可。 right = 2 in your case. 在您的情况下为right = 2 。

Answer 2

You can attach mousedown and mouseup events to initiate functions which will change and revert the cursor. 您可以附加mousedown和mouseup事件来启动将更改和还原光标的功能。

Within each function you can confirm that the button just pressed (or released) is the right mouse button. 在每个功能中，您可以确认刚刚按下（或释放）的按钮是鼠标右键。

Working Example: 工作示例：

 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