#dome{ background-color: red; } .yy{ background-color: #fff; width: 80px; height: 200px; position: absolute; }
<!--html-->
<div id="dome" style="width: 300px; height: 300px;">
<button id="btn" style="width: 60px; height: 60px; background-color: blue;">btn</button>
</div>
<!--js-->
let dome = document.querySelector('#dome')
let btn = document.querySelector('#btn')
<!--只有存在子元素才能看出区别-->
dome.onmouseenter = function(){
console.log('移入');
}
dome.onmouseleave = function(){
console.log('移出');
}
dome.onmouseover = function(){
console.log('移入');
}
dome.onmouseout = function(){
console.log('移出');
}
dome.oncontextmenu = function (e){
e.preventDefault()
let yy = document.querySelector('.yy')
if (yy) yy.remove()
yy = document.createElement('div')
yy.classList.add('yy')
let yy1 = document.createElement('div')
yy1.innerHTML='xxxx'
yy.appendChild(yy1)
document.body.appendChild(yy)
yy.style.left = e.pageX + 'px'
yy.style.top = e.pageY + 'px'
}
window.onclick = e =>{
let yy = document.querySelector('.yy')
if (yy&&!yy.contains(e.target))
yy.remove()
}
btn.addEventListener('click',function(e){
// e.stopPropagation() //阻止事件冒泡
console.log(111111);
},true)
dome.addEventListener('click',function(){
console.log(22222);
},true)
document.body.addEventListener('click',function(){
console.log(33333);
},true)
