javascript - 父元素子元素绑定了相同事件，不同动作。如何让子元素上的事件触发时父元素上的事件失效？？或者不触发？？

Question

看如下代码：

html:
<p class='parent'>
  <p class='child'></p> 
</p>

css:
 .parent{width:300px;height:300px;position:fixed;top:0px;left:50px;border:1px solid blue;}
 .child{width:50px;height:50px;position:absolute;top:0px;left:0px;border:1px solid green;}

js:
  var parent=document.getElementsByClassName('parent')[0];
  var child=document.getElementsByClassName('child')[0];
  parent.addEventListener('click',function(){
     console.log('你触发了父元素上的事件！');
  },false);
  child.addEventListener('click',function(){
     console.log('你触发了子元素上的事件！');
  },false);

以上代码：一旦点击子元素，则父元素，子元素上的事件都会触发，可我只要子元素触发！
修改后：
js:

  var parent=document.getElementsByClassName('parent')[0];
  var child=document.getElementsByClassName('child')[0];
  
  registerParent();
  registerChild();
  
  function registerParent(){
    parent.addEventListener('click',parentEvent,false);
  }
  
  function removeParent(){
    parent.removeEventListener('click',parentEvent);
  }
  
  function parentEvent(){
     console.log('你触发了父元素上的事件！');
  }
  
  function registerChild(){
     child.addEventListener('click',childEvent,false);
  }
  
  function removeChild(){
    child.removeEventListener('click',childEvent);
  }
  
  function childEvent(){
     removeParent();
     console.log('你触发了子元素上的事件！');
     registerParent();
  }

// 点击之后还是父元素，子元素都触发了事件，有没有什么办法能够实现我要的效果：点击子元素，父元素上的事件失效，或者不触发？？

Answer 1

不冒泡就可以了。

  child.addEventListener('click',function(e){
     console.log('你触发了子元素上的事件！');
     e.stopPropagation()
  },false);

Answer 2

可以用行内函数获取target或者通过事件冒泡获取事件target
说法可能有点问题，但是实现就这样

第一种：

多个li标签
<li class = list-group-item onclick = selectname(this) </li>

function selectname(obj){
  var target = $(obj)
  var onlineUsername = target.text()
  $('.msg').val('/w ' + onlineUsername)
}

第二种：

多个playbtn
<a class = playbtn> title </a>

  function clickGetVideo(mid){
  $('.playbtn').click(function(e){
    e.preventDefault()
    var target = $(this)
    var mid = target.attr('id')
    getVideo(mid)
  })
}