html - 单击链接时模拟更改背景颜色

Question

我有以下 HTML 和下面的 java 脚本来模拟单击链接块时背景颜色的变化，但它似乎不起作用。有什么理由吗？

如果我只处理了 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';
}

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';
}

Answer 2

除了 Sarfraz 的建议（style.backgrounColor vs style.background），您不需要在事件中为函数调用转义引号：

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

用户单引号或双引号。同样，无需转义引号 (\")。