divエリアの外をクリックしても効果はありますか？ </p> <p>

Question

document.getElementById("red").addEventListener("click",function(){ 
 
    document.getElementById("red").style.backgroundColor = "yellow"; 
 
document.getElementById("red").style.color = "#000"; 
 
    
 
    
 
    }); 
 

 
document.getElementById("green").addEventListener("click",function(){ 
 
    document.getElementById("red").style.backgroundColor = "red"; 
 
document.getElementById("red").style.color = "#fff"; 
 
});

#red{ 
 
    width:50px; 
 
    height:100px; 
 
    background-color:red; 
 
    color:#fff; 
 
    text-align:center; 
 
    margin-bottom:10px; 
 
    } 
 

 
#green{ 
 
    width:100px; 
 
    height:50px; 
 
    background-color:green; 
 
    color:#fff; 
 
    text-align:center; 
 
    }

<div id="red">div area1</div> 
 
<div id="green"> div area2</div>

は、私が上のクリックでのdiv＃赤の色を変更しようとしています上記のコードをDIVエリアの外側にクリックを検出し、that.In上でアクションを実行することは可能ですdiv＃緑（背景：赤;色：白）または外側のクリック（背景：青;色：白）と独自のクリック（背景：黄色;色：黒）。ページ、次にdiv＃redの外側のクリックを検出してエフェクトを適用する方法

Answer 1

EventListener関数でリスナーに渡されるイベントを使用する必要があります。クリックを受け取った要素であるターゲットプロパティをontainsします。ターゲットIDを確認し、それぞれのケースで必要な処理を行います。ここではサンプルです：

document.getElementsByTagName("html")[0].addEventListener("click",function(e){ 
 
\t if(e.target.id == "red"){ 
 
\t \t document.getElementById("red").style.backgroundColor = "yellow"; 
 
\t \t document.getElementById("red").style.color = "#000"; 
 
\t } 
 
\t else{ 
 
\t \t document.getElementById("red").style.backgroundColor = "red"; 
 
\t \t document.getElementById("red").style.color = "#fff"; 
 
\t } 
 
});

#red{ 
 
    width:50px; 
 
    height:100px; 
 
    background-color:red; 
 
    color:#fff; 
 
    text-align:center; 
 
    margin-bottom:10px; 
 
    } 
 

 
#green{ 
 
    width:100px; 
 
    height:50px; 
 
    background-color:green; 
 
    color:#fff; 
 
    text-align:center; 
 
    }

<div id="red">div area1</div> 
 
<div id="green"> div area2</div>

Answer 2

何ができるかであっても、文書自体のクリックを追加し、クリックされている項目の検出を支援するためにクリック機能に渡されたイベントオブジェクトを使用しています。クリックは、要素の内部または外部から来た場合、その情報を使って、検出することができます。ここ

document.addEventListener("click",function(ev){ 
    if(ev.target.id !== "red" && ev.target.id !== "green"){ 
     document.getElementById("red").style.backgroundColor = "blue"; 
    } 
})  

**素晴らしい**アイデアだbro..it作業fiddle