<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>study</title> </head> <body> <div class="out" oncontextmenu="myout(event)"> <div class="center" oncontextmenu="mycenter(event,this)"> <div class="in"></div> </div> </div> <style> .out { width: 300px; height: 300px; background: red; } .center { width: 200px; height: 200px; background: yellow; } .in { width: 100px; height: 100px; background: green; } </style> <script> function myout(ev) { console.log("外面的被点击了") ev.preventDefault()//阻止默认事件 } function mycenter(ev, obj) { if (ev.target == obj) {//阻止事件捕获 console.log("中间的被点击了") ev.stopPropagation()//阻止事件冒泡 ev.preventDefault()//阻止默认事件 } } </script> </body> </html>
