2

对于我的一个项目,我需要更改自定义光标 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 请记住,我不是专业的网络开发人员。

4

1 回答 1

0

我认为您应该return false在“onmousedown”和其他事件处理程序的末尾包含 a 。这应该防止“事件冒泡”。

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

于 2013-01-29T13:04:57.717 回答