JavaScript를 사용하여 마우스 이벤트를 현재 요소로 제한하는 방법

사용자가 마우스를 가져 가서 클릭 할 때 div의 배경 이미지를 변경하려고합니다. 사용자가 마우스를 올리거나 클릭하는 경우에만 이미지가 변경되는 것을 제한하고 있습니다. 이 예에서는 한 div가 클릭/클릭되었을 때 모든 버튼이 변경됩니다. 이것은 jQuery에서 이미 작동하고있는 복제하려는 것입니다. 나는 "this"를 사용할 수 있다고 생각하지만, 지금까지 시도한 모든 방법으로 오류가 발생합니다. 경고가 IE 나 크롬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;}

을 Firefox에서 페이지로드에서 발생하지만 이유를 말해 살았어 사람을위한

보너스 포인트 HTML

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

출처

2013-01-09 Dave Hubbard

수정 - Firefox에서 경고가 더 이상로드되지 않습니다. 나를위한 보너스 포인트! –

이벤트 처리기에서 for 루프를 제거 하시겠습니까? 'this'는 클릭 된 버튼을 참조해야합니다. 그렇지 않으면'(e || event) .target'이됩니다. – Shmiddty

in jQuery'if (this == e.target)'그것이 도움이된다면 클릭 한 것입니다. – Popnoodles

이 경우 자바 스크립트가 필요하지 않습니다. 그냥 CSS를 사용하십시오.

이

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

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

출처

2013-01-09 21:55:41 Geuis

함수의 이름으로'event'를 사용하지 않을 것입니다. 많은 브라우저에서 이벤트 객체를 저장하는 데 사용됩니다. CSS를 제안하기위한 +1 – Shmiddty

+1. :) – Shmiddty

뭐든지 부르세요. – Geuis

당신은이를 사용할 수 있습니다 다음 르 달아주세요 물건

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

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/

출처

2013-01-09 21:55:42 bluetoft

JavaScript를 사용하여 마우스 이벤트를 현재 요소로 제한하는 방법

답변

관련 문제