js-事件1_阻止事件冒泡_弹框菜单

迈不过友情╰ 2021-11-24 02:10 200阅读 0赞

点击按钮的时候，弹出菜单。点击其他地方的时候，隐藏菜单。代码如下：

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
 <meta charset="utf-8" />  
    <style>  
        div \{  
        width:100px;  
        height:150px; background:\#ccc;display:none;  
        \}  
    </style>  
    <script>  
        window.onload = function () \{  
            var oBtn = document.getElementById("btn1");  
            var oDiv = document.getElementById("div1");  
            oBtn.onclick = function (ev) \{  
                var oEvent = ev || event;  
                oDiv.style.display = "block";  
                **ev.cancelBubble = true;**  
            \};  
            document.onclick = function () \{  
                oDiv.style.display = "none";  
            \}  
        \}  
    </script>  
</head>  
<body>  
    <button id="btn1">显示</button>  
    <div id="div1"></div>  
</body>  
</html>

转载于:https://www.cnblogs.com/XChWaad/p/4910151.html

发表评论取消回复

表情：

评论列表（有 0 条评论，200人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 阻止事件冒泡和默认事件

如何阻止事件冒泡，这里先拓展个知识点： DOM事件流存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。 DOM标准事件流的触发的先后顺序为：先捕获再冒泡。即

逃离我推掉我的手/ 2023年07月24日 13:29/ 0 赞/ 40 阅读

相关 JS如何阻止事件冒泡

<%@ Page Language="C" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits=

叁歲伎倆/ 2023年06月01日 12:52/ 0 赞/ 24 阅读

相关 Js 冒泡事件阻止

出于对作者的尊重和感谢，原文地址为 http://www.cnblogs.com/jams742003/archive/2009/08/29/1556187.html

Bertha 。/ 2022年09月24日 00:29/ 0 赞/ 265 阅读

相关 js jquery阻止冒泡事件

event.stopPropagation(); -- 阻止元素冒泡事件注：嵌套元素一般都存在冒泡事件，会带来某些影响例：<div id="c1" οnclick="

╰+攻爆jí腚メ/ 2022年08月20日 07:27/ 0 赞/ 212 阅读

相关 js阻止事件冒泡

function stopHandler(event){ window.event?window.event.cancelBubble=true:eve

古城微笑少年丶/ 2022年07月13日 00:48/ 0 赞/ 287 阅读

相关 js中阻止事件冒泡与阻止事件默认行为

一、冒泡事件我们都知道冒泡就像水底气泡浮到水面这一过程。冒泡事件即是事件从最底层逐个经过上面一级级事件的过程，就是冒泡事件。那么如何有效的阻止冒泡事件的发生？其实在非I

雨点打透心脏的1/2处/ 2022年05月30日 06:13/ 0 赞/ 340 阅读

相关前端js阻止事件冒泡

-------------------- title: 前端js阻止事件冒泡 date: 2018-4-21 20:27:24 tags: \[js\] categor

电玩女神/ 2022年04月12日 09:47/ 0 赞/ 287 阅读

相关 js中阻止事件冒泡

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] <html> <head

淩亂°似流年/ 2022年01月14日 06:05/ 0 赞/ 315 阅读

相关 js-事件1_阻止事件冒泡_弹框菜单

点击按钮的时候，弹出菜单。点击其他地方的时候，隐藏菜单。代码如下： <!DOCTYPE html> <html> <head> <meta http-equ

迈不过友情╰/ 2021年11月24日 02:10/ 0 赞/ 201 阅读

相关 JS阻止事件冒泡和默认事件

本文转载自掘金中我的小伙伴的一篇文章：[https://juejin.im/post/5bf7ad096fb9a049ed308353][https_juejin.im_pos

妖狐艹你老母/ 2021年11月22日 12:46/ 0 赞/ 486 阅读