Question

对于我的一个项目，我需要更改自定义游标onmousedown并将其更改回onmouseup和onmouseout。目前，我只对将其用于Chrome有兴趣，稍后会看到不同的浏览器。

所以我开始使用以下代码。

HTML：

<div id="firstspot"></div>

的CSS：

#firstspot {
position:absolute;
width:145px;
height:145px;
margin-left:58px;
top:144px;
cursor:url(img/cur/hand-point-right.cur),wait;
}

#firstspot:active {
cursor:url(img/cur/hand-grab-right.cur),wait;
}

只有在我将鼠标移动一次后才会发生所需的更改，因为如果我更广泛地移动鼠标，则光标默认为“文本”光标。

但是，如果我尝试对背景图像而不是光标进行onmousedown更改，那么确实就可以使用了！ ~~~~~~~~~~~~~~~~

接下来，我尝试使用javascript使用以下代码获得所需的效果： HTML：

<div id="firstspot" onmousedown="chcursor();" onmouseup="chback();" onmouseout="chback();"></div>

的CSS：

#firstspot {
position:absolute;
width:145px;
height:145px;
margin-left:58px;
top:144px;
cursor:url(img/cur/hand-point-right.cur),wait;
}

的javascript：

function chcursor ()
{
document.getElementById('firstspot').style.cursor = "url(img/cur/hand-grab-right.cur),wait";
}

function chback ()
{
document.getElementById('firstspot').style.cursor = "url(img/cur/hand-point-right.cur),wait";
}

这产生了几乎相同的延迟效果，而onmouseup和onmouseout的加入完美地起作用。因此，只有在mousedown之后鼠标的一次简单移动之后，抓取手形光标才可见。 ~~~~~~~~~~~~~~~~~~~~`

研究揭示了一些名为事件冒泡的内容。

我想开始测试/控制这种现象，并希望有人能指出我正确的方向。

到目前为止，我遇到了“无法完成”并且无法创建所需的光标更改。

我更喜欢纯javascript解决方案而不是使用js库（为什么要为一个可能只需要几行js的解决方案添加一个库的公斤？），但是会感激不尽。

P.S。请记住，我不是专业的网络开发人员。

Answer 1

我认为你应该在'onmousedown'和其他事件处理程序的末尾添加return false。这应该可以防止'事件冒泡'。

请参阅以下示例： http://jsbin.com/ifitah/1/edit

onmousedown改变光标;可能需要控制事件冒泡

1 个答案: