JS_js阻止事件冒泡的方法

你的名字 2023-01-16 14:26 225阅读 0赞

阻止方法有三种：

# 1、event.stopPropagation(); #

document.querySelector("#login").addEventListener("click",(event)=>{ 
    	event.stopPropagation();
    })

# 2、return false; #

document.querySelector("#login").addEventListener("click",(event)=>{ 
    	return false;
    })

# 3、event.preventDefault(); #

document.querySelector("#login").addEventListener("click",(event)=>{ 
    	event.preventDefault();
    })

# 实例 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]

<div id="onlogin">登录</div>
    <div id="login" class="layout_login">
    	<div class="layout_login_">
    		<div class="layout_login_title">
    			用户登录
    		</div>
    		<div class="layout_login_input">
    			<input type="" name="" id="" placeholder="账号" value="" />
    			<input type="" name="" id="" placeholder="密码" value="" />
    		</div>
    		
    		<div class="layout_login_btn">
    			登录
    		</div>
    	</div>
    </div>
    <script> //登录显示 document.getElementById("onlogin").addEventListener("click",()=>{ document.querySelector("#login").style.display = "flex" }) //隐藏弹窗 document.querySelector(".layout_login").addEventListener("click",()=>{ document.querySelector(".layout_login").style.display = "none" }) //禁止冒泡 document.querySelector(".layout_login_").addEventListener("click",(event)=>{ event.stopPropagation(); }) </script>
    <style> .layout_login{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.4); z-index: 999; display: flex; align-items: center; justify-content: center; display: none; } .layout_login_{ width: 350px; height: 300px; border-radius: 7px; background: #ffffff; padding: 20px; } .layout_login_title{ font-weight: 600; font-size: 18px; } .layout_login_input{ width: 100%; height: 84px; border-radius: 4px; border: 1px solid #eaeaea; margin-top: 30px; } .layout_login_input input{ width: 100%; height: 50%; outline: none; border: none; padding: 0 14px; box-sizing: border-box; } .layout_login_input input:nth-child(1){ border-bottom: 1px solid #eaeaea; } .layout_login_btn{ width: 100%; height: 41px; background: #09aaff; border-radius: 4px; font-size: 16px; color: #fff; font-weight: 100; line-height: 41px; text-align: center; margin-top: 50px; } </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221022/54d5fd200aae4128a0fa446c389bd06b.png