<style>
.one {
width: 200px;
height: 200px;
background-color: aquamarine;
}
.two {
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
<body>
<div class="one">
<div class="two">
</div>
</div>
<script>
let one = document.querySelector('.one')
// one的点击事件
one.onclick = function () {
console.log('我是one 被点击了');
}
// one右击事件
one.oncontextmenu = function (e) {
// 取消默认行为
e.preventDefault()
console.log('我是one 我被右击了');
}
let two = document.querySelector('.two')
// two的点击事件
two.onclick = function (e) {
// 阻止事件冒泡
e.stopPropagation()
console.log('我是two 我被点击了');
}
</script>
</body>
