Click event on javascript createn div

Question

Here I have a html

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

And javascript function for greating a 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';
}

And here I to do an event outside document.getElementById('subdiv'): 在document.getElementById（'subdiv'）之外做一个事件：

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

the alert('hello world') reaction on clicking the subdiv, and how to do, that works EXACTLY ONCE in every click outside the subdiv? 单击细分时的警报（“ hello world”）反应，以及如何在细分外部的每次点击中完全起作用？ I like possible simple response without a jquery. https://jsfiddle.net/hx2u6j35/ Thank you.

Answer 1

Use event.target to grab the Element on which event is invoked.

 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 2

You need to disable event-capturing by passing another argument to the event handler

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

Answer 3

First, you have an error when running this code.. The subdiv function is not available for the "onclick" function..

Get rid of the onclick attribute by using this :

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

With this, you can avoid anything when you want..

Answer 4

Div tag is not properly append to the maindiv so I have created myself and preventing child tag from calling parent function

 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>