Question

Javascript初学者在这里...... 尝试添加类似于css伪类“Active”的功能，但在vanilla javascript中。我正在尝试在按下时更改按钮的颜色，然后在释放按钮时恢复原始颜色。这就是我所拥有的：

myButton.addEventListener("mousedown", btnEvent);
myButton.addEventListener("mouseup", btnEvent);

...

btnEvent = function (e) {
    var storedColor;
    if (e.type == 'mousedown') {
        storedColor= e.target.style.backgroundColor;
        e.target.style.backgroundColor = someColorWhilePressed;
    } else if (e.type == 'mouseup') {
        e.target.style.backgroundColor = storedColor;
    };
};

这不起作用，在mouseup上，'storedColor'未定义。我假设这是因为相同的函数对象不共享但是创建了两个？如何才能做到这一点？附加到同一元素的两个或多个事件侦听器是否可以共享一个可以在调用之间保留数据的公共目标对象（函数）？

感谢。

Answer 1

您的变体不起作用，因为storedColor是局部变量，并且每次调用btnEvent函数时都会创建它。

您可以在btnEvent函数中存储颜色，因为函数是JavaScript中的对象。

演示：http://jsfiddle.net/LQSe4/

var btnEvent = function (e) {
    if (e.type == 'mousedown') {
        btnEvent['storedColor'] = e.target.style.backgroundColor;
        e.target.style.backgroundColor = someColorWhilePressed;
    } else if (e.type == 'mouseup') {
        e.target.style.backgroundColor = btnEvent['storedColor'];
    };
};

myButton.addEventListener("mousedown", btnEvent);
myButton.addEventListener("mouseup", btnEvent);

或者您可以将原始颜色存储在DOM元素中（演示：http://jsfiddle.net/rk33f/）：

var btnEvent = function (e) {
    if (e.type == 'mousedown') {
        e.target['storedColor'] = e.target.style.backgroundColor;
        e.target.style.backgroundColor = '#F00';
    } else if (e.type == 'mouseup') {
        e.target.style.backgroundColor = e.target['storedColor'];
    };
};

var myButton = document.getElementById('btn');

myButton.addEventListener("mousedown", btnEvent);
myButton.addEventListener("mouseup", btnEvent);

Answer 2

在这种特定于元素的情况下，您最好将颜色存储在元素本身上：

btnEvent = function (e) {
    var elm = e.target,
        color;

    if (e.type == 'mousedown') {
        elm.setAttribute("data-storedColor", e.target.style.backgroundColor);
        elm.style.backgroundColor = someColorWhilePressed;
    } else if (e.type == 'mouseup') {
        color = elm.getAttribute("data-storedColor"):
        if (color) {
            elm.style.backgroundColor = color;
            elm.removeAttribute("data-storedColor");
        }
    };
};

在那里，我们将颜色存储在data-* attribute上。您也可以使用“expando”属性（您为元素指定的ad hoc属性，例如elm.mySpecialProperty = ...），但expandos通常不是最佳做法。

附注：

除非您在某处声明btnEvent变量，否则您将成为The Horror of Implicit Globals的牺牲品。要么将var放在它前面，要么更好，使它成为函数声明而不是表达式：
```
function btnEvent(e) {
    // ...implementation...
}
```
addEventListener有第三个参数，你应该提供它。我似乎记得有些浏览器对它很挑剔（尽管任何现代浏览器可能都不是）。（您需要值false。）

按钮的颜色，具有公共对象实例的事件侦听器

2 个答案: