如何使用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);

Answer 2

您可以使用此：

function processAction(e) {
        var active = document.querySelector('.active'); // get currently active button
        if(active != undefined)      
             active.className = "btn"; // remove active class

        e.target.className = 'btn active' // add active class to clicked element
}

那么你的css可以是這樣的：

 .btn {width:100px; height:61px; float:left;background: orange;}
  .active {background: red;}

http://jsfiddle.net/NXVv7/