javascript - 如何使用 JavaScript 将鼠标事件限制为当前元素

Question

当用户将鼠标悬停在 div 上并单击它时，我试图更改它的背景图像。我坚持限制图像仅更改为用户悬停/单击的元素。在此示例中，当将鼠标悬停在/单击一个 div 时，所有按钮都会发生变化。这是我正在尝试复制的东西，它已经在 jQuery 中工作了。我猜测可以使用“this”，但到目前为止我尝试过的所有方法都会导致错误。

如果有人能告诉我为什么在 Firefox 中的页面加载时出现警报，但在 IE 或 Chrome 中则不然，请加分

JavaScript

var buttons = document.getElementsByTagName('div'); 
var i;

function iconDown(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px -61px';
    }
}

function iconUp(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px -122px';
    }
}

function iconOver(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px -122px';
    }
}

function iconOut(e) {
    for (i=0; i<buttons.length; i++) {
        buttons[i].style.backgroundPosition = '0px 0px';
    }   
}

function processAction() {
        alert("Working!");

}

function Init () {
    for (i=0; i<buttons.length; i++) {

            if (document.addEventListener) {  // all browsers except IE before version 9

                buttons[i].addEventListener ("mousedown", iconDown, false);
                buttons[i].addEventListener ("mouseup", iconUp, false);
                buttons[i].addEventListener ("mouseover", iconOver, false);
                buttons[i].addEventListener ("mouseout", iconOut, false);
                buttons[i].addEventListener("click", processAction, false);

        }
        else {   // IE before version 9
                buttons[i].attachEvent ("onmousedown", iconDown);
                buttons[i].attachEvent ("onmouseup", iconUp);
                buttons[i].attachEvent ("onmouseover", iconOver);
                buttons[i].attachEvent ("onmouseout", iconOut);
                buttons[i].attachEvent("onclick", processAction);
            }
        }
   } 

Init(); 

CSS

        .btn {width:100px; height:61px; float:left;}
        #BackImg {background: url('images/Back.gif') no-repeat 0px 0px;}
        #NextImg {background: url('images/Next.gif') no-repeat 0px 0px;}

HTML

        <DIV class="btn" ID="BackImg"></DIV>
        <DIV class="btn" ID="NextImg"></DIV>

Answer 1

您不需要任何 JavaScript。只需使用 CSS。

.specialClassyClass{
    /*default background position*/
}
.specialClassyClass:hover{
    /*hover state background position*/
}
.specialClassyClass:active{
    /*mouse down background position*/
}

对于点击的东西:

var whatever = function(el, ev, handler){
    el.attachEvent?
        el.attachEvent(ev, handler):
    el.addEventListener(ev, handler, false);
}

whatever(button[i], 'click', processAction);