标准事件流默认冒泡阶段、阻止事件传播、阻止默认行为、（自定义菜单案例）

2301_76440312

已于 2023-03-07 18:42:23 修改

阅读量91

点赞数

文章标签： javascript 前端 html

于 2023-03-07 18:10:57 首次发布

本文链接：https://blog.csdn.net/2301_76440312/article/details/129385486

版权

标准事件流

<html><body><div><input/><div></body></html>

每个都绑定点击事件=回调函数

每一次鼠标点击input 的流程

捕获：window=>docuemtn=>html=>body=>div=>input
目标：input
冒泡：input=>div=>body=>html=>docuemtn=>window
dom0事件只能在冒泡阶段触发。

默认情况，只在冒泡触发。

通过DOM2的方法捕获

可以通过dom2的方法绑定点击事件，捕获到。

<div id="box2"></div>
box2.addEventListener("click",function(){
        console.log("box2,捕获");
    },true)
    document.body.addEventListener("click",function(){
        console.log("body,捕获");
    },true)

阻止冒泡事件传播

只执行按钮的点击事件，停止父级元素的执行。

//给按钮绑定点击事件
obutton.onclick = function(evt){
    //这个 的父级元素 删除
    this.parentNode.remove()
    //阻止 冒泡事件传播
    evt.stopPropagation()
}

阻止默认行为（return false）

dom0 方法 return false

    document.oncontextmenu=function(){
        console.log("右键单击.自定义右键菜单");
        return false  // 阻止事件行为
    }

dom2方法 evt.preventDefault()

// dom2 阻止事件行为 
    document.addEventListener("contextmenu",function(evt){
        console.log("右键单击.自定义右键菜单");
        evt.preventDefault() 
    })

自定义菜单案例

	<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
        width: 100px;
        padding:10px;
        border:1px solid black;
        display: none;
        position: absolute;
    }
    ul li:hover{
        background: skyblue;
     
    }
</style>
</head>
<body>
	<ul id="list">
   	 	<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
	</ul>
	  <script>
    document.addEventListener("contextmenu",function(evt){
        evt.preventDefault() // 阻止默认行为
        var i = document.getElementById("list")
        console.log("右键");
        i.style.display = "block"

        var x = evt.clientX //鼠标右击距离可视窗口左上角的文职。
        var y = evt.clientY
            //如果X轴 >= html的可视窗口的宽度 - i.触发元素的宽
        if(x>=document.documentElement.clientWidth-i.offsetWidth)
        x=document.documentElement.clientWidth-i.offsetWidth
        //如果Y轴 >= html的可视窗口的高度 - i.触发元素的高
        if(y>=document.documentElement.clientHeight-i.offsetHeight)
         y=document.documentElement.clientHeight-i.offsetHeight


        i.style.left= x+"px"
        i.style.top= y+"px"
    })
        //设置单击事件，把ul列表样式display="none"
    document.addEventListener("click",function(){
        var i = document.getElementById("list")
        i.style.display="none"
    })
</script>
</body>