javascript - Parent onClick is not triggered when the child element is clicked inside button -

i have dropdown-button component has click lister. button has text , icon. click event triggered if click button on outline , not on text or icon. here component:

<template lang="html"> <div>   <button class="button dropbtn" @click="toggledropdown">     <span>{{ name }}</span>     <span class="icon"><i class="fa fa-caret-down"></i></span>   </button>   <div v-show="visible" class="dropdown-content is-primary-important">     <slot>     </slot>   </div> </div> </template>  <script> export default {   props: ['name'],   data: function() {     return {       visible: false     }   },   mounted: function() {     this.hidedropdownonclick();   },   methods: {     toggledropdown: function() {       // trigged on click of button       // make dropdown visible       console.log("toggling dropdown");       this.visible = !this.visible;     },     hidedropdownonclick: function() {       window.onclick = (event) => {         console.log(event.target);         if (!event.target.matches('.dropbtn')) {           console.log("here", this.visible);           this.visible = false;         }       }     }   } } </script>  <style lang="css"> /* dropdown content (hidden default) */ .dropdown-content {   position: absolute;   background-color: #fff;   min-width: 140px;   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   z-index: 1; }  /* links inside dropdown */ .dropdown-content {   padding: 12px 16px;   text-decoration: none;   display: block; } </style> 

i feel missing basic here, can me this? thanks.

edit

it seems bug browser answer question says: button element not firing click event when clicking on button text , releasing off (but still inside button)?

when click in span toggled twice:) once toggledropdown method, second windows onclick handler.

here working example: jsfiddle

<template id="tmp">   <div>   <button class="button dropbtn" @click="toggledropdown">     <span>{{ name }}</span>     <span class="icon"><i class="fa fa-caret-down"></i></span>   </button>   <div v-show="visible" class="dropdown-content is-primary-important">     <slot>     </slot>   </div> </div> </template>  <div id="x">   <tmp name="my name">      <span>toggle me!</span>   </tmp> </div>  vue.component('tmp', { template: '#tmp',  props: ['name'], data: function() { return {   visible: false } }, mounted: function() { this.hidedropdownonclick(); }, methods: { toggledropdown: function() {   // trigged on click of button   // make dropdown visible   console.log("toggling dropdown");   this.visible = !this.visible; } } });  new vue({ el: '#x', data: function(){     return {     name: 'myname'   } } }); 

edit: if don't want use clickaway here small directive detect clicks outside of element:

var vueclickoutside = {      bind: function(el, binding, vnode) {         var bubble = binding.modifiers.bubble;         var handler = function(e) {             if (bubble || (!el.contains(e.target) && el !== e.target)) {                 binding.value(e);             }         }         el.__vueclickoutside__ = handler;         document.addeventlistener('click', handler);     },      unbind: function (el, binding, vnode) {         document.removeeventlistener('click', el.__vueclickoutside__);         el.__vueclickoutside__ = null;     } }; 

you have register directive:

vue.directive('click-outside', vueclickoutside) 

and use in template:

 v-click-outside:delay="hidedropdownonclick"