单击同样具有可单击事件的div下面的链接_div圆内的可单击链接_使div文本中的链接可单击 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

今天聊聊DOM事件的传播机制

要实现和网页的互动，就需要通过 JavaScript 里面的事件来实现。每次用户与一个网页进行交互，例如点击链接，按下一个按键或者移动鼠标时，就会触发一个事件。...> 如果单击了页面中的 div 元素，那么这个 click 事件沿 DOM 树向上传播，在每一级节点上都会发生，按照如下顺序进行传播： div body...也就是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。...虽然上面的例子中好像问题也不大，但是想象一下如果这个列表有 100 个元素，那我们就需要添加 100 个事件监听器，这个工作量还是很恐怖的。这个时候我们就可以利用事件代理来帮助我们解决这个问题。...也就是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。

9652 0

24 事件绑定、事件修饰符与事件三阶段

这个示例的运行效果是，当单击内部的链接a时，只执行一个doThis函数；而如何将stop修饰符去了，doThat也会派发。 2，多个修饰符串连事件修饰符可以串连并用，例如： prevent只有修饰符，没有事件监听这种情况下，只是阻止表单中submit按钮单击时的默认提交行为，但是并不监听任何事件...>阻止事件的默认行为运行效果： ? 在这个示例中，当单击发生在内部的灰色区域上时，如果加了stop，只响应外部的监听；只有去掉stop，单击内部才有两个响应。...以js方式实现同样的效果，需要启用捕捉阶段的监听，并判断当前的事件对象是不是这个div，远不如加一个self修饰符简单。 6，once 只监听一次，例如： <!...$once具有同样的功能。 7，passvie 使用passive修饰符，提高渲染效率 <!

1.3K1 0

您找到你想要的搜索结果了吗？

是的

没有找到

「Web编程API」- 03

DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。当时的2大浏览器霸主谁也不服谁！...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...事件冒泡下的e.target和this abc abc abc var ul = document.querySelector

1.4K5 0

3 个 React 状态管理的规则

同样，`state.count 包含一个表示计数器的数字，例如，用户单击按钮的次数。...单击 Add 按钮时，将调用 addNewProduct() 事件处理程序。在 addNewProduct() 内部，用 Set 对象来保持产品名称唯一。组件是否应该关注这个实现细节？不需要。...以同样的方式，当单击 Delete 按钮时，处理程序将调用 dispatch({ type: 'delete', name })。remove 操作将产品名称从名称状态中删除。...有趣的是，reducer 是命令模式的特例。总结状态变量应只关注一个点。如果状态具有复杂的更新逻辑，则将该逻辑从组件提取到自定义 hook 中。...这 3 个简单的规则能够使你的状态逻辑易于理解、维护和测试。原文链接 https://dmitripavlutin.com/react-state-management/

1.7K0 0

前端成神之路-WebAPIs03

DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？ ?...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ? 当时的2大浏览器霸主谁也不服谁！...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...console.log(this); }); 事件冒泡下的e.target和this abc

2.9K2 0

事件高级

DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ?...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...console.log(this); }); 事件冒泡下的e.target和this abc

1.5K4 1

事件高级

DOM事件流 html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 ...那么是先执行父元素的单击事件，还是先执行div的单击事件？？？事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...比如：我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。 ?...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...console.log(e.target); console.log(this); }); 事件冒泡下的e.target和this

1.3K2 0

jQuery (二)

使用jQuery处理事件事件处理一个栗子，单击p时背景变成灰色由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数 html <!...').unbind('.myMod'); // 取消同时绑定在ns1和ns2命名空间下的单击处理程序 $('a').unbind('click.ns1.ns2') 使用命名空间达到模块化的目的 // 使用函数名...; // 触发没有命名空间的单击处理程序或者如下 // 单击一将会触发二上的事件 $('#button1').click((e) => {$('#button2').trigger('button2'...parent(); // 列表元素的父元素 $('a[href]').parents('p'); // 选择含有链接的p元素 $('a[href]').closest('div'); //...选择包含链接的最里层的div元素恢复到之前的选中的元素 end()弹出栈 // 寻找所有div元素，然后在其中寻找p元素，高亮显示p元素，然后给div加边框 $('div').find('p').addClass

9.3K3 0

css的知识点

使用内联(inline)或浮动(float)的列表项。这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法 ? image.png ? image.png ?...i svg { position: absolute; z-index: 2; } // 节点单击事件 function domClick(e){...input").checked var subName = item.querySelector(".to__name").innerHTML } 这个单击事件对输入框和标签都有效因为...，单击事件在span中 ?...image.png div的 display: inline-block; 改变了盒子的样式 ? image.png

5371 0

JQuery事件处理

这是隐藏的内容，点击上面的内容会显示这里的内容。...：这里是合成事件测试代码这里的内容默认是隐藏的 <script language=”javascript...，第二次单击隐藏，同样可以用合成时间toggle(),这个时候的a也不会跳转 $(function(){ $(“a”).toggle(function(){ $(this).next().show();...(){ alert(“子元素事件被激活”); }); });*/ //单击b包含的内容会激活两个事件，这样怎么才能解决？... //很多事件都是有用户单击或者鼠标划过来触发的，可是刚打开的页面我们有没有办法直接触发呢？

2.8K5 0

web前端常见面试题

但还是得网站的可访问性，保证用户在任何环境下都能正常访问网页得核心内容或能使用基本功能（避免网页打不开、排版错误等），并为他们提供当前条件下最好的体验，这就是渐进增强得核心思想。...，是可独立分配的、可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目； nav 描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表...:link 表示未访问的链接状态； :visited 表示已访问状态；:active 表示激活状态（鼠标按下）；:hover 表示悬停状态。...，并做同样的事情，然后是下一个，等等，直到它到达元素；而现代浏览器在默认情况下，所有事件处理程序都在冒泡阶段进行注册。...stopImmediatePropagation 方法时，点击 div 元素时，后面注册的 click 将不会被触发，而且还会阻止事件冒泡；比如下面的例子，给 p 绑定多个 click 事件，在第二个事件函数中调用

2.3K2 0

事件高级

事件侦听注册事件 addEventListener // (1) 里面的事件类型是字符串必定加引号而且不带on // (2) 同一个元素同一个事件可以添加多个侦听器（事件处理程序）...常情况下terget 和 this是一致的，但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），这时候this指向的是父元素，因为它是绑定事件的元素对象...console.log(this); }); 事件冒泡下的e.target和this abc...阻止默认行为让链接不跳转 var a = document.querySelector('a'); a.addEventListener('click', function...，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。

1.2K1 0

webAPIs02-事件

Web APIs - 第2天学会通过为DOM注册事件来实现可交互的网页特效。...能够判断函数运行的环境并确字 this 所指代的对象理解事件的作用，知道应用事件的 3 个步骤目标学习会为 DOM 注册事件，实现简单可交互的网页特交。...事件事件就是浏览器或用户做出的事情，比如：用户在网页上单击一个按钮。...事件类型 click 译成中文是【点击】的意思，它的含义是监听（等着）用户鼠标的单击操作，除了【单击】还有【双击】dblclick // 双击事件类型 btn.addEventListener...window.event 同样可以获取事件对象。

7181 0

js事件防止冒泡

jQuery对这个事件对象进行了必要的扩展，从而在不论什么浏览器中都能够使用这个属性。通过.target，能够确定DOM中首先接收到事件的元素（即实际被单击的元素）。... ，而不是其它后代元素。...单击样式转换器的其它地方则能够折叠和扩展整个区域。 3. 默认操作假设我们把单击事件处理程序注冊到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时。...这样的行为与我们讨论的事件处理程序不是同一个概念，它是单击锚元素的默认操作。类似地，当用户在编辑完表单后按下回车键时。会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。...在这样的情况下，.preventDefault()方法则能够在触发默认操作之前终止事件。提示当在事件的环境中完毕了某些验证之后，一般会用到.preventDefault()。比如。

2.5K4 0

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

日历控件现在显示当年的月份的全名单击“属性”选项卡右侧的箭头图标以显示“事件”窗格，该窗格显示所选控件公开的每个事件的切换按钮。对于打开的每个事件，WijmoJS 设计器将自动生成事件Java代码。...如下图，打开valueChanged事件的前端控件。您可以通过单击页面右边缘的箭头来折叠属性/事件侧栏。设计表面支持具有顺序布局的多个纯前端控件。...在“属性”窗格中向下滚动，找到系列属性，然后单击“显示项目”按钮将其展开。将鼠标悬停在最新价格上，然后单击出现的链接。...单击后退按钮返回FlexChart设置，然后像以前一样展开系列属性。现在单击“添加项目”链接以将新图表系列添加到集合的末尾。...单击新添加项目右边缘的向下箭头，然后从可用系列类型列表中选择TrendLine。新添加的项目现在显示为[趋势线]。将鼠标悬停在括号内的文本上，然后单击出现的链接。

5.8K2 0

移动开发实用

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作...，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作...造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。...《无法自动播放的audio元素》摇一摇功能 HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。...的默认触摸事件 winphone下默认触摸事件事件使用e.preventDefault是无效的目前解决方法是使用样式来禁用 html{-ms-touch-action: none;}/* 禁止winphone

6.4K3 0

浅析 JavaScript 中的事件委托

事件传播当你单击下面 html 中的按钮时： Click...通过下面的代码，你会侦听到在元素上发生的捕获阶段的点击事件： document.body.addEventListener('click', () => { console.log(...你不需要把委托事件监听器直接附加到按钮上，而是可以委托父监听。单击按钮时，父元素的侦听器将会捕获冒泡事件（还记得前面所说事件传播吗？）。...使用事件委托需要 3 个步骤：步骤 1：确定要监视事件的元素的父级元素在上面的例子中，是按钮的父元素。...; } }); 顺便说明一下，event.currentTarget 指向事件侦听器直接附加到的元素。

2.6K3 0

Python爬虫基础：常用HTML标签和Javascript入门

例如，把下面的代码保存为index.html文件并使用浏览器打开，单击按钮“保存”，网页会弹出提示“保存成功”。...但有些JavaScript代码需要在特定的时机才可以运行，例如本节第一段代码，只有单击页面的按钮之后才会执行okClick属性指定的JavaScript代码，这种机制叫做事件驱动。...得益于事件驱动机制，我们可以指定某段代码在什么情况下才会运行，例如页面加载时（onLoad事件）、鼠标单击时（onClick事件）、键盘按键时（onkeypress事件）等等。...例如，下面的代码演示了在链接标签中使用href属性指定JavaScript代码的用法。...例如，把下面的代码保存为文件index.html，此时页面上会显示图像文件1.jpg的内容，单击该图像时会切换成为2.jpg的内容。

1.8K1 0

学习jQuery这一篇就够了

注意：如果存在（不存在）就删除（添加）一个样式类需求描述：当单击按钮的时候，隐藏 div，再次单击按钮的时候，显示 div .hide { width: 100px; height...() 方法描述：.after () 和.insertAfter () 实现同样的功能。...需求描述：为按钮添加单击事件，当按钮单击的时候，向控制台输出 “按钮被单击了” 按钮 $('button').on('click',function () {...需求描述：为 ul 下的所有 li 添加单击事件，要求将该单击事件委托给 ul，当单击 li 时，所对应的 li 背景变为红色 1111 2222</...event.target 触发事件的 DOM 元素。 event.pageX 相对于页面的左上角。 event.pageY 相对于页面的顶部。 event.clientX 相对于视口的左上角。

8105 0

杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

事件,而不触发和元素上的 click事件.当单击元素时,只触发元素上的click事件, 而不触发元素上的click事件....; event.stopPropagation();//停止冒泡事件 }) 当单击span元素时,只会触发span元素上的click事件,而不会触发 div元素和body元素的click事件....可以用同样的方法解决元素上的问题阻止默认行为网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为在jquery中,提供了preventDefault...); return false;//阻止链接跳转 }); (7)event.which()方法该方法的作用是在鼠标单击事件中获取到鼠标左中右键,在键盘事件中获取键盘的按键....A标签添加事件，之后再追加a标签都具有相同的事件。

8.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭