자식 요소 인 경우 클릭 방지

자식 요소가 클릭되었는지 여부를 결정하기 위해 부울을 사용하는 것은 좋지 않습니까? 더 좋은 방법이 있습니까?자식 요소 인 경우 클릭 방지

참고 : jquery를 사용하고 싶지 않습니다. 아래

참조 코드 :

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
body{margin:0;} 
#container{height:300px;background:red} 
#box{width:500px;height:300px;background:blue;margin:auto} 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="box"></div> 
</div> 
<script> 
var hbWindow = window, 
    hbDocument = document, 
    hbBooleanIfIsOutside = new Boolean(), 
    hbIdBox = hbDocument.getElementById('box'), 
    hbIdContainer = hbDocument.getElementById('container'); 

hbWindow.onload = function() { 

    hbIdContainer.onclick = function() { 
     if(hbBooleanIfIsOutside) { 
      alert('you\'re outside!'); 
     } else { 
      alert('you\'re inside!'); 
     } 
     hbBooleanIfIsOutside = true; 
    } 

    hbIdBox.onclick = function() { 
     hbBooleanIfIsOutside = false; 
    } 

} 
</script> 
</body> 
</html>

추가 된 새로운 버전 : 나는 대신하여 addEventListener를 사용하고이 버전에서

var hbWindow = window, 
    hbDocument = document, 
    hbIdBox = hbDocument.getElementById('box'), 
    hbIdContainer = hbDocument.getElementById('container'); 

hbWindow.onload = function() { 

function inOrOut(e){ 
    if (!e) e = hbWindow.event; 
    if((e.target || e.srcElement).id == 'container') { 
     alert('you\'re outside!'); 
    } else { 
     alert('you\'re inside!'); 
    } 
} 

hbIdContainer.addEventListener('click', inOrOut, false); 

}

출처

2012-05-02 user1087110

가 왜'window'와'document' 별명입니까? – Mathletics

그냥 습관 ... – user1087110

습관, 물론, 왜 시작 했습니까? – Mathletics

클릭 한 항목을 확인하려면 event.target을 확인하십시오. IE6-8에서는 window.event.srcElement 속성을 확인할 수 있습니다. 우리가 document.body에 이벤트를 부착하는 동안

if (document.body.addEventListener) { 
    document.body.addEventListener("click", alertMe, false); 
} else if (document.body.attachEvent) { 
    document.body.attachEvent("onclick", alertMe); 
} 

function alertMe(event) { 
    console.log(event.target || window.event.srcElement.nodeName); 
}

그래서, 우리는 target (또는 일부의 경우 srcElement에서) 클릭을 유발 자식 확인할 수 있습니다.

데모 : http://jsbin.com/oxuzek/7/edit

출처

2012-05-02 20:05:49 Sampson

고마워요 조나단! "element.onclick"을 사용하는 경우 "element.addEventListener ("click ", alertMe, false)"를 언제 사용합니까? : S – user1087110

@ user1087110 "onclick"은 내가 잘못 본 것이 아니라면 old-school 방법이었고,'attachEvent' 다음에 마지막 수단이되어야합니다. 'addEventListener'를 사용하면 여러 이벤트 핸들러를 추가 할 수 있습니다. – Sampson

설명해 주셔서 감사합니다! – user1087110

자식 요소 인 경우 클릭 방지

답변

관련 문제