模拟点击链接时更改背景颜色

Question

我有以下HTML代码和下面的JavaScript代码，旨在模拟链接块被点击时背景颜色的变化，但似乎不起作用。有什么原因吗？

如果只处理onmousedown事件，背景颜色一定会变成蓝色。但是如果同时处理onmousedown和onmouseup事件，则在视觉上不会发生任何变化。

<div class='Button'><a href='mylink' onmousedown=\"changeColorOnMouseDown();\"  onmouseup=\"changeColorOnMouseUp();\"><span id='note'>note...</span></a></div>


function changeColorOnMouseDown()
{
    document.getElementById('note').style.background='blue';
}

function changeColorOnMouseUp()
{
    document.getElementById('note').style.background='#d8dde7';
}

- tom

Answer 1

试试这个：

<div class="Button"><a href="#" onMouseDown="changeColorOnMouseDown();"  onMouseUp="changeColorOnMouseUp();"><span id="note">note...</span></a></div>


function changeColorOnMouseDown()
{
    document.getElementById('note').style.backgroundColor = 'blue';
}

function changeColorOnMouseUp()
{
    document.getElementById('note').style.backgroundColor = '#d8dde7';
}

- Sarfraz

---

抱歉，还有一个问题，似乎只处理onmouseup事件，而没有处理onmousedown事件？因此我在屏幕上看不到蓝色，只能看到第二种颜色，这是正常的吗？ - tom

当您按下鼠标按钮并将其保持在链接上方时，它应该触发。您可以通过函数中的警报进行测试。 - Sarfraz

Answer 2

除了Sarfraz建议的(style.backgrounColor vs style.background)之外，您在事件中调用函数时不需要转义引号：

<a href='mylink' onmousedown="changeColorOnMouseDown();"  onmouseup="changeColorOnMouseUp();">

可以使用单引号或双引号。同样，无需转义引号（\").

- James H

---

正确，这是一个糟糕的漏洞。现在我看到的是仅处理onmouseup事件并更改颜色，但未更改onmousedown事件的颜色，为什么呢？ - tom