<script>
let demo = document.querySelector('#demo')
let btn = document.querySelector('#btn')
demo.oncontextmenu = function (e) {
e.preventDefault()
let menu = document.querySelector('.menu')
if (menu) menu.remove()
menu = document.createElement('div')
menu.classList.add('menu')
let menu1 = document.createElement('div')
menu1.innerHTML = 'xxxx'
document.body.appendChild(menu)
menu.style.left = e.pageX + "px"
menu.style.top = e.pageY + "px"
}
window.onclick = e => {
let menu = document.querySelector('.menu')
if (menu && !menu.contains(e.target))
menu.remove()
}
demo.onmouseenter = function(){
console.log("移入...");
}
demo.onmouseleave = function (){
console.log("移除...");
}
demo.onmouseover = function () {
console.log("移入...");
}
demo.onmouseout = function () {
console.log("移除...");
}
btn.onclick =function(e){
e.stopPropagation()
console.log(3333);
}
demo.onclick =function(){
console.log(1111);
}
document.body.onclick =function(){
console.log(2222);
}
demo.addEventListener('click',function () {
console.log(1111);
},true)
demo.addEventListener('click',function () {
console.log(2222);
},true)
demo.addEventListener('click',function () {
console.log(3333);
},true)
</script>
