Click-Ereignis auf JavaScript createn div

Question

Hier habe ich eine html

<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()"></div> 

und Javascript-Funktion für greating ein Subdiv

function subdiv() { 
    var p = document.getElementById('maindiv'); 
    var s = document.createElement('div'); 
    s.setAttribute('id','subdiv'); 
    p.appendChild(s); 
    var s2 = document.getElementById('subdiv'); 
    s2.style.height = '100px'; 
    s2.style.width = '100px'; 
    s2.style.backgroundColor = 'green'; 
} 

Und hier bin wollen ein Ereignis außerhalb document.getElementById zu tun ('Subdiv'):

document.addEventListener('click',function() { 
    alert('hello world'); 
}); 

Wie Avoi d die alarm ('hallo welt') reaktion auf das klick auf die unterteilung, und wie zu tun, das GENAU EINMAL bei jedem Klick außerhalb der Unterteilung funktioniert? Ich mag mögliche einfache Antwort ohne eine Frage. https://jsfiddle.net/hx2u6j35/ Vielen Dank.

Answer 1

Div-Tag an den maindiv nicht richtig angehängt ist, so habe ich mich erstellt und verhindern Kind-Tag von Aufruf übergeordneter Funktion

function subdiv() { 
 
    var p = document.getElementById('maindiv'); 
 
    var s = document.createElement('div'); 
 
    s.setAttribute('id', 'subdiv'); 
 
    s.setAttribute('onclick', 'return false;'); 
 
    p.appendChild(s); 
 
    var s2 = document.getElementById('subdiv'); 
 
    s2.style.height = '100px'; 
 
    s2.style.width = '100px'; 
 
    s2.style.backgroundColor = 'green'; 
 
} 
 

 
document.addEventListener('click', function() { 
 
    alert('hello world'); 
 
}); 
 

 
$("#subdiv").on('click', function(e) { 
 
    alert("subdiv"); 
 
    return false; //THIS WON'T CALL PARENT FUNCTION OR YOU CAN USE e.stopPropagation 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()"> 
 
    <div id="subdiv" style="height:100px;width:100px;background-color:green"></div> 
 
</div>

Answer 2

Verwenden Sie event.target, um das Element abzurufen, auf dem event aufgerufen wird.

function subdiv() { 
 
    var p = document.getElementById('maindiv'); 
 
    var s = document.createElement('div'); 
 
    s.setAttribute('id', 'subdiv'); 
 
    p.appendChild(s); 
 
    var s2 = document.getElementById('subdiv'); 
 
    s2.style.height = '100px'; 
 
    s2.style.width = '100px'; 
 
    s2.style.backgroundColor = 'green'; 
 
} 
 

 
document.addEventListener('click', function(e) { 
 
    if (e.target.id == 'maindiv') { 
 
    alert('hello world'); 
 
    } 
 
});

<div style="width: 200px;height:200px;padding:50px;background-color: lightcyan" id="maindiv" onclick="subdiv()"></div>

Answer 3

Sie müssen event-capturing deaktivieren, indem Sie ein weiteres Argument an den Ereignishandler vorbei

document.addEventListener('click',function() { 
    alert('hello world'); 
}, false); 

Answer 4

Zuerst Sie einen Fehler haben, wenn dieser Code ausgeführt wird .. Die Subdiv Funktion ist für die "onclick" -Funktion nicht verfügbar.

Get Durch die Nutzung dieses von dem Onclick-Attribute los:

document.addEventListener('click',function(_event) { 
    if(_event.target.id === "maindiv"){ 
     subdiv(); 
    }else{ 
     alert('hello world'); 
    } 
}); 

Damit kann man alles vermeiden, wenn Sie wollen ..