JS 로 DIV 를 눌 러 배경 스타일 을 변경 하고, 다시 클릭 하면 배경 이 회 복 됩 니 다.

이벤트 onclick 을 대상 의 div 탭 에 추가 하고 이벤트 함수 호출 을 클릭 하여 chrome 에서 색상 을 RGB 로 쓰 는 색상 값 방식 을 기억 하 십시오. 16 진법 의 무효 (\ # * * * * * *) 로 쓰 십시오.
HTML 코드:
<div style="background-color:#FFF;" class="list_collection_item" onclick="selFuc(this)">

JS 코드 는 다음 과 같 습 니 다.
function selFuc(obj){
    if (obj.style.backgroundColor == "rgb(255, 255, 255)"){
        obj.style.backgroundColor="#1ec5e5";
    }
    else{
        obj.style.backgroundColor="rgb(255, 255, 255)";
    }

}

그러나 div 내 에 하위 급, 심지어 손 급 div 도 onclick 사건 에 가입 했다 면 거품 사건 을 막 아 실현 해 야 합 니 다 (거품 사건 관련:http://www.jb51.net/article/42492.htm  ),하위 div 또는 손 div 를 클릭 할 때 부모 급 div 의 클릭 이벤트 가 발생 하지 않 습 니 다. 구체 적 인 코드 는 다음 과 같 습 니 다.
JS 코드:
function stopEventBubble(event){
    var e=event || window.event;
    if (e && e.stopPropagation){
        e.stopPropagation();  // IE
    } else {
        e.cancelBubble=true;  //IE
    }
}


function poiSel(obj) {
    if (obj.style.backgroundColor == "rgb(211, 211, 211)"){
        obj.style.backgroundColor = "#438eb9";
    } else{
        obj.style.backgroundColor = "rgb(211, 211, 211)";
    }
    var event = onclick;
    stopEventBubble(event);
}

현재 이 기능 은 IE 와 chrome 브 라 우 저 에서 잘 구현 되 고 있 지만, 왜 fireforx 브 라 우 저 에 서 는 거품 발생 시간 을 막 을 수 없 는 지 모 르 겠 습 니 다. 남 겨 진 문제!!!

좋은 웹페이지 즐겨찾기