子要素の場合はクリックしないようにする

子要素がクリックされたかどうかを判定するためにブール値を使用することは悪い考えですか？より良い方法はありますか？子要素の場合はクリックしないようにする

注：jqueryを使用したくありません。

、以下を参照してくださいコード：私は代わりにaddEventListenerを使用しています。このバージョンで

：

<!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>

は、新しいバージョンを追加しました。

出典

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.onEventListener（" click "、alertMe、false）"と "element.onclick"を使用するかを使用する？：S – user1087110

@ user1087110 "onclick"は私が間違っていないとすれば古い学校の方法で、 'attachEvent'の後の最後の手段にすべきです。 'addEventListener'を使うと、複数のイベントハンドラを追加できます。 – Sampson

説明してくれてありがとう！ – user1087110

子要素の場合はクリックしないようにする

答えて

関連する問題