javascript - addEventListener registers multiple identical events, how to make one of them trigger and the others invalid? ?

<code>html:
<div id='p'>
  <div id='c'></div>
</div>

css:
 #p {width:300px;height:300px;border:1px solid blue;}
 #c {width:30px;height:30px;background-color:red;}

js：
var p=document.getElementById('p');
var c=document.getElementById('c');

registerParentEvent();
registerChildEvent();

// 注册父元素事件
function registerParentEvent(){
  p.addEventListener('mousedown',function(e){
   e.stopPropagation();
   console.log('你点击了父元素');
  },false);

  window.addEventListener('mouseup',function(){
    console.log('你离开了父元素！');
  },false);
}

// 注册子元素事件
function registerChildEvent(){
  c.addEventListener('mousedown',function(e){
   e.stopPropagation();
   console.log('你点击了子元素');
  },false);

  window.addEventListener('mouseup',function(){
    console.log('你离开了子元素！');
  },false);
}
</code>

After releasing the mouse on the parent element, the prompt:
You have left the parent element!
You left the child element!

After releasing the mouse on the child element, the prompt:
You have left the parent element!
You left the child element!

Since the mouseup event is registered on the window, the effect I need is to make it distinguishable. When the mouse clicks on the parent element, what is triggered is the content matching the parent element. When the child element is clicked , what is triggered is the content matching the child element.

Reply content:

<code>html:
<div id='p'>
  <div id='c'></div>
</div>

css:
 #p {width:300px;height:300px;border:1px solid blue;}
 #c {width:30px;height:30px;background-color:red;}

js：
var p=document.getElementById('p');
var c=document.getElementById('c');

registerParentEvent();
registerChildEvent();

// 注册父元素事件
function registerParentEvent(){
  p.addEventListener('mousedown',function(e){
   e.stopPropagation();
   console.log('你点击了父元素');
  },false);

  window.addEventListener('mouseup',function(){
    console.log('你离开了父元素！');
  },false);
}

// 注册子元素事件
function registerChildEvent(){
  c.addEventListener('mousedown',function(e){
   e.stopPropagation();
   console.log('你点击了子元素');
  },false);

  window.addEventListener('mouseup',function(){
    console.log('你离开了子元素！');
  },false);
}
</code>

After releasing the mouse on the parent element, the prompt:
You have left the parent element!
You left the child element!

After releasing the mouse on the child element, the prompt:
You have left the parent element!
You left the child element!

Since the mouseup event is registered on the window, the effect I need is to make it distinguishable. When the mouse clicks on the parent element, what is triggered is the content matching the parent element. When the child element is clicked , what is triggered is the content matching the child element.

window only needs to be bound once, and the event triggerer can be determined by event.target.

<code>window.addEventListener('mouseup',function(e){
    console.log('你离开了: ' + e.target.id);
},false);</code>

Conventional writing:

<code>p.addEventListener('mousedown',function down(e){
   window.addEventListener('mouseup',function up(){
    window.removeEventListener('mouseup', up);
    //p=>up
  });
    //p=>down
});</code>