js冒泡

最新推荐文章于 2024-06-14 08:20:46 发布
置顶 最新推荐文章于 2024-06-14 08:20:46 发布
阅读量602 收藏
点赞数
分类专栏： asp.net学习总结 文章标签： div function xhtml html

怎么在目标对象节点下加上一个或多个子节点后就触发不了原本目标对象的事件？例如在下面代码中div下若没子节点subdiv层,div原本的onclick事件可以触发，但在div下添加子节点subdiv就触发不了onclick事件，请问这是否事件冒泡，有什么办法可以解决即使目标对象div有子节点subdiv扔可以触发onclick事件？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <style type="text/css">
            div {
                position: absolute;
                width: 200px;
                height: 120px;
            }
        </style>
        <script type="text/javascript">
            var z = 2;
            window.onload = function(){
                var divs = document.getElementsByTagName("div");
                for (var i = 0; i < divs.length; i++) {
                    divs[i].onclick = function(e){
                        var e = e || window.event;
                        var o = e.target ? e.target : e.srcElement;
                        z++;
                        if (o.id == "subdiv") {
                            o.parentNode.style.zIndex = z;
                        }
                        else {
                            o.style.zIndex = z;
                           
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <div style="background:#FFCE9D;left:20px;top:20px;z-index:1;">
            <div id="subdiv">
                why? why? why? why? why? why? why? why? why? why? why? why? why? why?
            </div>
        </div>
        <div style="background:#9DFF9D;left:50px;top:80px;z-index:2;">
        </div>
        <!---->
        <div style="background:#FFCE9D;left:300px;top:20px;z-index:1;">
        </div>
        <div style="background:#9DFF9D;left:330px;top:80px;z-index:2;">
        </div>
    </body>
</html>

wanglei_samrtfish
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java idea简单的登录注册（基于mybaits，mysql，tomcat）
qq_20642155的博客
04-02 6027
整体结构 目录结构要注意UserMapper.xml和UserMapper接口要在同一目录下，具体做法是写<mapper resource="com/it/web/LoginDemo/UserMapper.xml"></mapper> 包括在建directory时不要用"."，而是用"/"，否则会出现找不到UserMapper.xml报错。 mybatis-config.xml <?xml version="1.0" encoding.
JavaScript冒泡排序的四种方法
͏⁠͏͏⁠͏ ͏⁠͏
03-07 8534
冒泡
js 冒泡
weixin_42581003的博客
01-06 1084
JavaScript 中的冒泡指的是事件冒泡，也就是事件从里到外地传播。 比如，当你点击一个按钮时，这个事件会从按钮开始，然后逐层向上传播到它所在的容器，再到容器的容器，依次类推，直到传播到整个页面。 在 JavaScript 中，可以通过在事件处理函数中调用 event.stopPropagation() 来阻止事件的冒泡。 例如： document.querySelector('#some-b...
js实现冒泡排序
热门推荐
不想起床
06-27 7万+
冒泡排序原理： 冒泡排序算法的原理如下： 比较相邻的元素。如果第一个比第二个大，就交换他们两个。 对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。 针对所有的元素重复以上的步骤，除了最后一个。 持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比比较 白话就是：比如有6个数，你需要比较5趟，这......
JavaScript 冒泡法举例
weixin_46121540的博客
03-03 453
冒泡法是一种简单的排序算法，它的原理是比较相邻的两个元素，如果第一个元素大于第二个元素，就交换它们的位置，否则不变。// 遍历数组中除了最后一个元素之外的所有元素，并比较相邻两个元素并交换位置。// 外层循环控制比较的轮数，每轮比较后最大或者最小的元素会被放到末尾。// 内层循环控制每轮比较的次数，每次比较相邻的两个元素并交换位置。// 内层循环控制每轮比较的次数，每次比较相邻的两个元素并交换位置。// 如果当前位置的值大于下一个位置的值，则进行值的交换。// 定义一个变量len，用于表示原始数组的长度。
JavaScript 冒泡排序原理
weixin_44309299的博客
04-27 2118
冒泡排序原理 升序 1.比较相邻的元素。如果第一个比第二个大，就交换他们两个。 2.对每一对相邻元素做同样的工作，从开始第一对到结尾的最后一对。在这一点，最后的元素应该会是最大的数。 3.针对所有的元素重复以上的步骤，除了最后一个。 4.持续每次对越来越少的元素重复上面的步骤，直到没有任何一对数字需要比较。 var arr = [2, 9, 1, 66, 55]; var count = 0; for (var i = 0; i < arr.length - 1; i
js 冒泡排序 去重的方法
weixin_62260350的博客
10-10 525
JS 冒泡排序 去重
【算法】JavaScript冒泡排序
A Lucky Boy的博客
04-10 820
通俗易懂的JavaScript冒泡排序
Javascript的事件冒泡
Night_nigh的博客
03-27 1万+
今天呢，来讲一个知识点，叫做Javascript的事件冒泡（Bubble），什么叫事件冒泡，就是指某件事件的向上传导，当后代元素被触发，其祖先元素也会被同样触发，这就是事件冒泡，光说不行，还得先演示一下。 首先，我们先创建一个“HTML”文档，在头部部分写上一个内联样式“style”，给“body”一个背景颜色，在“body”部分写上两个“div”给他们写上一个“ID”名（取名随意） 再创建两个不同大小的方块也给他们一个背景颜色（这里大小 颜色随意），就像这样： 然后就开始“...
js 如何取消冒泡
m0_52946104的博客
09-20 365
答，因为在多个点击事件相互覆盖执行的时候，会连续触发点击事件。
js冒泡排序两种排序代码
06-28
js冒泡排序，冒泡排序的工作原理，我们有一个未排序的数组arr = [ 1, 4, 2, 5, -2, 3 ]任务是使用冒泡排序对数组进行排序。 冒泡排序比较索引 0 中的元素，如果第 0 索引大于第 1 索引，则交换值，如果第 0 索引...
javascript冒泡排序小结
10-22
冒泡排序由于比较简单和容易理解，往往会成为人们首先想到的排序算法。最基本的想法就是在一次里面比较两个数字，并且确保他们在移动到其他项目之前有一个正确的顺序。在每一关结束，有价值的“排序”到正确的位置，...
js冒泡排序 js冒泡排序
05-29
js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序...
Javascript冒泡排序算法详解
10-25
主要介绍了Javascript冒泡排序算法的相关资料,需要的朋友可以参考下
JavaScript 冒泡排序
01-08
冒泡排序 1. 什么是冒泡排序？ 计算机语言基础算法的一种。 把数组里面的数字按照规律排好序。 2. 算法描述： 比较相邻的两个数，如果第一个数比第二个数大，则两数交换位置 ； 对之后的相邻元素进行同样的工作，从...
css引入方式有几种？link和@import有什么区别？
tianxianghuiwei的博客
06-13 196
link>标签和@import规则。<link>这种方式是在HTML文档的<head>部分或者XHTML文档的<head>或<body>部分添加<link>标签，通过href属性指定外部样式表的URL。<link>标签会在页面加载时同时加载并解析外部样式表，从而使得样式可以立即生效。@import@import规则是在CSS文件中使用的一种方式，用于引入外部样式表。它需要写在CSS文件的顶部（除了可能的@charset声明），并且只能引入一次。@import规则相对于<link>
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
最新发布
weixin_42283461的博客
06-14 214
HTML静态网页成品作业(HTML+CSS)—— 零食商城网页(1个页面)
HTML DOM 事件
lsx202406的博客
06-13 432
HTML DOM（文档对象模型）事件是当网页中的某些操作发生时，浏览器会自动触发或通过脚本代码手动触发的动作。这些事件可以是对用户操作的响应，如点击按钮，也可以是浏览器自身的动作，如页面加载完成。理解和掌握DOM事件对于前端开发至关重要，因为它们是实现动态交互和响应用户行为的核心。
HTML跨年烟花
兔子王
06-04 1万+
学会了这个html烟花秀，跨年就不缺文案喽~

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值