在光标不移动时更改光标答案

【问题标题】：Changing the cursor while it's not moving在光标不移动时更改光标
【发布时间】：2017-03-01 10:38:03
【问题描述】：

所以我有一个 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>

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

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

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

PS：在 chrome 中测试，这是我需要它工作的主浏览器

【问题讨论】：

标签： javascript jquery html css cursor

【解决方案1】：

您可以附加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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

为什么在我给出几乎相同的答案后你还要费心回答，这更符合 OP 的要求？我试图理解你浪费时间的逻辑
我在制定解决方案时不在此页面上。一旦我得到满意的解决方案，我就会回到这个页面并发布它。与此同时，您已经发布了您的解决方案。我同意我们的方法非常相似。我会说这可能是件好事。
你花了一个小时？即使它是重复的，你还是发布了它？
我花了大约 10 分钟。我猜你是个程序员。
奇怪的是你的 sn-p 工作正常，但是当我把你的脚本和样式表放在一个新的 .html 文件中时，我没有得到相同的行为。

【解决方案2】：

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 在你的情况下。

【讨论】：

释放鼠标按钮时，这似乎不会将光标重置为默认样式。 e.button == 2 在这里总是如此，因为它是同一个按钮。它需要按事件 type 进行区分。
它只是变回默认光标，因为上下文菜单已打开。如果您将 oncontextmenu="return false;" 添加到 body 您的 sn-p 将不再工作
@vrugtehagel - 抱歉，我编辑了它，结果搞砸了。我会再次编辑！