1 primeval way
// html
<div id="box" style="width:110px;height:110px;</div>
// js ------ js contains the method used to view the dom element containing the relationship,
document.addEventListener('click',(e)=>{
alert('zhixing')
var box = document.getElementById('box');
if(box.contains(e.target)){
alert('在内');
}else{
alert('在外');
}
})
document.addEventListener('click',(e)=>{
alert('zhixing')
var box = document.getElementById('box');
if(e.target.className===‘box’){
alert('在内');
}else{
alert('在外');
}
})
2, vue wording
//html
<div id="box" ref="box" style="width:110px;height:110px;</div>
// js ---- ref is vue get DOM element method, bindings ref attribute on the label, js the internal components with this. Value $ refs.ref the call.
created(){
document.addEventListener('click',(e)=>{
console.log(this.$refs.box.contains(e.target));
if(!this.$refs.box.contains(e.target)){
this.isShowDialog = false;
}
})
}
原文：https://blog.csdn.net/cxz792116/article/details/79415544
3vue
The outermost div to add a click event @ click = "userClick = false"
Click to elements of the above plus: @ click.stop = "! UserClick = userClick" // vue click.stop prevent the spread // click event to continue the self-test can be directly @ click.stop stop bubbling
Or the child element at an event in js
click(e)=>{
e.stopPropagation (); // stop the event bubbling
this.userClick = !this.userClick;
}
Pro-test is useful Ha ~
// html
<div id="box" style="width:110px;height:110px;</div>
// js ------ js contains the method used to view the dom element containing the relationship,
document.addEventListener('click',(e)=>{
alert('zhixing')
var box = document.getElementById('box');
if(box.contains(e.target)){
alert('在内');
}else{
alert('在外');
}
})
document.addEventListener('click',(e)=>{
alert('zhixing')
var box = document.getElementById('box');
if(e.target.className===‘box’){
alert('在内');
}else{
alert('在外');
}
})
2, vue wording
//html
<div id="box" ref="box" style="width:110px;height:110px;</div>
// js ---- ref is vue get DOM element method, bindings ref attribute on the label, js the internal components with this. Value $ refs.ref the call.
created(){
document.addEventListener('click',(e)=>{
console.log(this.$refs.box.contains(e.target));
if(!this.$refs.box.contains(e.target)){
this.isShowDialog = false;
}
})
}
原文：https://blog.csdn.net/cxz792116/article/details/79415544
3vue
The outermost div to add a click event @ click = "userClick = false"
Click to elements of the above plus: @ click.stop = "! UserClick = userClick" // vue click.stop prevent the spread // click event to continue the self-test can be directly @ click.stop stop bubbling
Or the child element at an event in js
click(e)=>{
e.stopPropagation (); // stop the event bubbling
this.userClick = !this.userClick;
}
Pro-test is useful Ha ~