javascript - javascript创建div上的点击事件

Question

我这里有一个html

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

以及用于创建分割的 javascript 函数

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.getElementById('subdiv') 之外做一个事件:

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

如何避免单击分割区域时出现警报('hello world') react ，以及如何避免每次在分割区域外点击时都出现 EXACTLY ONCE？我喜欢没有 jquery 的可能的简单响应。 https://jsfiddle.net/hx2u6j35/谢谢。

Answer 1

div 标签没有正确附加到 maindiv，所以我自己创建并防止子标签调用父函数

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>