对于我的一个项目,我需要更改自定义光标 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 更改,它确实可以在 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 效果很好。因此,抓手光标仅在鼠标按下后的一次简约移动后再次可见。~~~~~~~~~~~~~~~~~~~~`
研究揭示了一种叫做事件冒泡的东西。
我想开始测试/控制这种现象,并希望有人能指出我正确的方向。
到目前为止,我遇到了“无法完成”并且无法创建所需的光标更改。
我更喜欢纯 javascript 解决方案而不是使用 js 库(为什么要为可能只需要几行 js 的解决方案添加大量的库?),但我将不胜感激。
PS 请记住,我不是专业的网络开发人员。