当光标不移动时更改光标

Question

当光标不移动时更改光标

3

我有一个基于HTML、CSS和JavaScript/jQuery的Web应用程序，它可以拖动元素（意思是，光标不会在该元素上移动，因为该元素随着光标移动）。我希望将光标更改为“移动”光标，但我遇到了奇怪的行为。我编写了以下代码以进行演示：

<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;”；但是，以下情况发生了：

- 初始状态：光标默认为default - 鼠标按下：光标默认为default - 鼠标移动：光标默认为default - 鼠标松开：光标变为move - 鼠标移动：光标默认为default

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

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

- user3546284

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rounin · Answer 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;
}

<div></div>

- vsync · Answer 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在您的情况下。