0

这里是 Javascript 初学者...尝试添加类似于 css 伪类“Active”的功能，但使用的是原版 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' 是未定义的。我认为这是因为没有共享同一个函数对象，而是创建了两个？如何才能做到这一点？附加到同一元素的两个或多个事件侦听器是否可以共享一个可以在调用之间持久化数据的公共目标对象（函数）？

谢谢。

4

2 回答 2

0

您的变体不起作用，因为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);​
于 2012-12-30T08:30:43.210 回答
0

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

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-* 属性上。您也可以只使用“expando”属性（您分配给元素的临时属性，例如elm.mySpecialProperty = ...），但 expandos 通常不是最佳实践。

旁注：

  • 除非您在某处声明变量，否则您将成为隐式全局恐怖的btnEvent牺牲品。要么在它前面放一个，或者更好的是，让它成为一个函数声明而不是一个表达式：var

    function btnEvent(e) {
    // ...implementation...
}

  • addEventListener有第三个参数，你应该提供它。我似乎记得有些浏览器对此很挑剔（尽管任何现代浏览器都可能不是）。（你想要价值false。）

于 2012-12-30T08:38:04.507 回答