文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

js事件防止冒泡

jQuery对这个事件对象进行了必要的扩展，从而在不论什么浏览器中都能够使用这个属性。通过.target，能够确定DOM中首先接收到事件的元素（即实际被单击的元素）。...如今，单击button不会再折叠样式转换器。而单击边框则会触发折叠操作。可是，单击标签相同什么也不会发生，由于它也是一个后代元素。实际上。...与.target类似，这种方法也是一种纯JavaScript特性，但在跨浏览器的环境中则无法安全地使用 。 只是，仅仅要我们通过jQuery来注冊全部的事件处理程序。就能够放心地使用这种方法。 以下。...并在button的单击处理程序中加入一些代码： $(document).ready(function(){  $(‘#switcher .button’).click(funtion(event){...默认操作 假设我们把单击事件处理程序注冊到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时。浏览器会载入一个新页面。

3.1K40

jQuery事件--jQuery基础知识点(2)

1.所谓的冒泡其实实质就是事件执行中的顺序。防止冒泡的发生：除了使用stopPropagation()方法阻止事件的冒泡过程外，还可以通过语句return false实现停止事件的冒泡过程。 2....遇到执行ready()方法时，通过查看isReady值是否被设置，如果未被设置，那么就说明页面并未加载完成，在此情况下，将未完成的部分用一个数组缓存起来，待ready()方法加载完成后，再将未完成的部分通过缓存一一执行...可以使元素在鼠标悬停与鼠标移除的事件中进行切换，可使用jQuery中的mouseenter与mouseleave进行替换。...//移除a标签的单击事件 7. trigger(type,[data])在所选择的元素上触发指定类型的事件，自动执行！...如果不希望页面自动执行，可使用triggerHandler()方法，该方法与trigger()方法基本相同，只是不会自动执行包含的事件。

81621
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    jQuery (二)

    使用jQuery处理事件 事件处理 一个栗子，单击p时背景变成灰色 由于es6的箭头函数不支持this的绑定，所以无法使用箭头函数，只能使用匿名函数 html 实际上是通过定时器来完成的，由于定时器是一段段的执行，所以动画为异步操作，先执行返回，动画等待某个时刻进行执行。返回的结果，并不一定执行完毕。返回的结果，并不是执行完毕。...this; } ps 这个灰常简单，原型链那一套内容，需要注意的是要进行返回该对象，否则无法进行链式调用 使用一下下 $('#debug').println('x =', 'x', 'y'); 即完成了一个...上定义一个方法即可，如果有多个方法，请直接使用前缀 如果有事件需要绑定，使用插件名作为命名空间，然后放在插件名中，即，不能使用全局的 如果插件需要使用data()方法关联数据 数据值要在一个对象中。...文件命名需要使用jquery.plugin.js jQuery的UI库 https://jqueryui.com/ ps 该库已经两年未更新了，不过lssues 依旧在回复中，对于库的检查 https:

    10.2K30

    jQuery中on()、bind()、live()、delegate()之间的区别

    事件冒泡 当我们点击一个链接时，其触发了链接元素的单击事件，该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。...$('a').bind('click', function() { alert("That tickles!"); }); 因此一个单击操作会触发alert函数的执行。...click事件接着会向树的根方向传播，广播到父元素，然后接着是每个祖先元素，只要是它的某个后代元素上的单击事件被触发，事件就会传给它。 ? 在操纵DOM的语境中，document是根节点。...它会绑定事件到所有的选出来的元素上 它不会绑定到在它执行完后动态添加的那些元素上 当元素很多时，会出现效率问题 当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题 2 .live()...而和.live()相同的地方在于都是用event delegation; 优点 你可以选择把事件绑定到对应的元素上 chaining被正确的支持了 jQuery仍然需要迭代查找所有的selector/event

    1.5K30

    jQuery：详解jQuery中的事件（二）

    上篇有过下面的一个例子，在其中如果要连续单击“标题”链接，实现“内容”隐藏和显示的效果，那么按照之前的做法就需要在绑定“click”事件的时候判断当前的“内容”部分是隐藏还是显示，然后进行相反的操作，显然就麻烦的多...那么在单击子元素A的时候，会依次触发三个click事件；单击元素B的时候，会依次触发两个click事件。 　　...就上面的简单描述，已经可以看出问题所在了，那就是会出现意想不到的click事件，所以需要对事件作用范围进行限制。 　　jQuery有三种办法可以解决事件冒泡导致的问题。...那么： 　　首先添加一个移除事件的按钮： 移除所有事件 　　然后可以为该按钮绑定若干的click事件，使用链式操作就可以很简单的为其绑定几个click...click”参数也可以达到相同的效果。

    3K30

    第79天：jQuery事件总结（二）

    上篇有过下面的一个例子，在其中如果要连续单击“标题”链接，实现“内容”隐藏和显示的效果，那么按照之前的做法就需要在绑定“click”事件的时候判断当前的“内容”部分是隐藏还是显示，然后进行相反的操作，显然就麻烦的多...那么在单击子元素A的时候，会依次触发三个click事件；单击元素B的时候，会依次触发两个click事件。 　　...就上面的简单描述，已经可以看出问题所在了，那就是会出现意想不到的click事件，所以需要对事件作用范围进行限制。 　　jQuery有三种办法可以解决事件冒泡导致的问题。...那么： 　　首先添加一个移除事件的按钮： 移除所有事件 然后可以为该按钮绑定若干的click事件，使用链式操作就可以很简单的为其绑定几个click...”参数也可以达到相同的效果。

    2K20

    waypoint_使用jQuery Waypoint创建粘性导航标题

    稍微增加一点，我们将使用另一个插件ScrollTo ，以便在用户单击导航链接时提供平滑的滚动和方便的定位。 步骤1：盒子 我确定您已经熟悉HTML5引入的各种新元素 。...首先，我们需要将导航栏封闭在一个容器中，这将是我们的实际航路点，并用作方便的占位符（在下面进行更多介绍）。...如果我们向下滚动，则航路点所属的部分与变为活动状态的部分相同。 但是，向上滚动经过一个航路点就意味着它是前面的部分，因此我们使用.prev()进行选择。...然后，我们将selected类从导航栏中的所有链接中删除，然后将其重新应用到其href属性与当前活动部分的id对应的类。 这工作得很好。...尽管有更好的方法将函数绑定到click事件，但我们将继续使用最简单的方法： .click() 。 .scrollTo()方法的调用方式与.waypoint()非常相似。

    4.5K30

    事件高级

    该方法接收三个参数: ●type:事件类型字符串，比如click、 mouseover，注意这里不要带on ●listener: 事件处理函数，事件发生时，会调用该监听函数 useCapture:可选参数...那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？ 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...4.实际开发中我们很少使用事件捕获，我们更关注事件泡。...在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象

    1.8K41

    jQuery：详解jQuery中的事件（一）

    注意以上两种方法的区别： 　　window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，也即在此时JavaScript才可以访问网页中的任何元素； 　　$(document...根据上述描述，显然使用jQuery的$(docum).ready()方法时会出现一个问题。由于在该方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载晚。...第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子，下面网页中，单击“标题”链接将显示内容。 　　... 　　按照需求，需要完成以下几个步骤： 　　（1）等待DOM装载完毕； 　　（2）找到“标题”所在的元素，绑定click事件； 　　（3）找到“内容”元素，将“内容”显示出来。...明天继续完成jQuery事件的下半部分，包括的内容有合成事件、事件冒泡、移除事件等内容。

    2.3K20

    【JS】328- 8个你不知道的DOM功能

    这里面最有意思的是 once 选项。在很多情况下我们都需要这个功能，并且不会使用 removeEventListener() 或使用其他的复杂技术来强制只能点击一次。...请注意，任何特殊字符（如HTML标记）都将作为HTML实体插入，与 insertadjacenthl() 相比，该方法的行为有所不同。...我将 blur 和 focus 包括在内，以证明这些不符合条件，并且始终返回0（即不单击） 像IE11这样的老浏览器有非常不一致的行为 请注意，该演示包含了一个很好的用例，用于演示-模拟三次单击事件的能力...offsetheight 属性为每个属性返回相同的值，因为它不考虑滚动或隐藏区域；它只测量元素的实际高度，包括任何垂直填充和边框。...上面的例子集中在元素高度上，这是最常见的用例，但是您也可以使用 offsetwidth 和 scrollwidth，这将以与水平滚动相同的方式应用。

    1.7K10

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

    事件,而不触发 和元素上的 click事件.当单击 元素时,只触发 元素上的click事件, 而不触发元素上的click事件....; event.stopPropagation();//停止冒泡事件 }) 当单击span元素时,只会触发span元素上的click事件,而不会触发 div元素和body元素的click事件....可以用同样的方法解决 元素上的问题 阻止默认行为 网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 在jquery中,提供了preventDefault...); return false;//阻止链接跳转 }); (7)event.which()方法 该方法的作用是在鼠标单击事件中获取到鼠标左中右键,在键盘事件中获取键盘的按键....如果需要发送的内容较少时，处理比较方便。但在真实项目中，往往需要处理的数据内容很复杂。 jQuery提供了相应的方法帮助开发者解决这个问题。

    9.4K20

    JavaScript事件详解

    这种函数较之前的方法好处是一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数。...显然，如果为一个超链接添加了click事件监听器，那么当该链接被点击时该事件监听器就会被执行。...但如果把该事件监听器指派给了包含该链接的p元素或者位于DOM树顶端的document节点，那么点击该链接也同样会触发该事件监听器。...例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。...目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该链接就是目标节点（此时的目标节点实际上是超链接内的文本节点）。

    83410

    Python实战03：实现一键自动登录

    学习Excel技术，关注微信公众号： excelperfect 我平时在办公室的工作之一是在公司生产管理系统上查看和审核文档。...要进入公司生产管理系统，我通常的操作是： 1.打开浏览器，输入或者选取网址并打开网页。 2.单击网页上的“生产环境”链接，进入系统登录界面窗体。 3.在登录窗体中，因为名称已默认，所以只需输入密码。...4.单击“确定”按钮进入系统。 整个操作过程如下图1所示。 ? 图1 为何不将整个过程自动化？这样就可以节省时间，提高效率。实际上，针对我的办公电脑，使用几行Python代码就可实现。.../') #等待20秒 #可根据电脑运行速度调整时间 time.sleep(20) #单击屏幕上的(1100, 390)处 #对应着我电脑打开网页的“生产环境”链接 #可根据实际调整坐标 pyautogui.click...(1100,390) #等待5秒 time.sleep(5) #单击屏幕上的(800, 420)处 #对应登录窗体中密码处 pyautogui.click(800,420) #输入密码 #修改为实际的密码

    2.3K10

    微软Outlook中#MonikerLink漏洞的风险和大局观

    call">Call me on Skype* 那么，当单击该链接时，就会弹出一个警告对话框，警告我们打开该链接可能不安全。...这样的链接将绕过前面讨论的现有Outlook安全限制，并且当用户单击该链接时，Outlook将继续访问远程资源“\\10.10.111.111\test\test.rtf”。...泄露本地NTLM凭据信息 很容易观察到，访问远程“test.rtf”的尝试将使用SMB协议（端口445），并且在此过程中会泄漏本地NTLM凭据信息。这与许多其他NTLM凭据泄露技巧的过程相同。...MkParseDisplayName()”API来完成这项工作——解析Moniker Link字符串并使用它来“查找”COM对象。...需要再次强调的是，Word（RTF PoC）在这里只是一个例子。由于COM的性质，它实际上取决于被利用的应用程序（COM服务器）以及该应用程序的安全性。

    52810

    jQuery 事件(三) 事件的绑定和解绑、对象的使用、自定义事件

    如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数 卸载事件off()方法 通过.on()绑定的事件处理程序 通过off() 方法移除该绑定 根据on绑定事件的一些特性...（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 event.preventDefault() 方法：阻止默认行为 这个用的特别多，在执行这个方法后，如果点击一个链接...") }); alert需要执行的条件：必须有用户点击才可以。...() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡...如果它们不是由目标元素直接触发的，那么它就不会进行任何处理 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。

    4.5K30

    事件高级

    该方法接收三个参数：  type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on  listener：事件处理函数，事件发生时，会调用该监听函数  useCapture...冒泡阶段   我们向水里面扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（ 最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡...在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行），  这时候this指向的是父元素，因为它是绑定事件的元素对象...阻止默认行为 让链接不跳转 var a = document.querySelector('a'); a.addEventListener('click', function

    1.5K10

    事件高级

    该方法接收三个参数: type: 事件类型字符串，比如click、mouseover ，注意这里不要带on listener: 事件处理函数，事件发生时，会调用该监听函数 useCapture...那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？ 事件流描述的是从页面中接收事件的顺序。 事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。...在 IE6~8 中，浏览器不会给方法传递参数，如果需要的话，需要到 window.event 中获取查找。 ?...常情况下terget 和 this是一致的， 但有一种情况不同，那就是在事件冒泡时（父子元素有相同事件，单击子元素，父元素的事件处理函数也会被触发执行）， 这时候this指向的是父元素，因为它是绑定事件的元素对象...阻止默认行为 让链接不跳转        var a = document.querySelector('a');        a.addEventListener('click', function

    1.7K20

    第78天：jQuery事件总结（一）

    当然使用传统的JavaScript也能完成这些交互，但是jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件处理能力。 　　...注意以上两种方法的区别： window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，也即在此时JavaScript才可以访问网页中的任何元素； $(document...根据上述描述，显然使用jQuery的$(docum).ready()方法时会出现一个问题。由于在该方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。...第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。第三个参数则是用来绑定的处理函数。举个实际的例子，下面网页中，单击“标题”链接将显示内容。 　　...5 6 按照需求，需要完成以下几个步骤： 　　（1）等待DOM装载完毕； 　　（2）找到“标题”所在的元素，绑定click事件； 　　（3）找到“内容”元素，将“内容”显示出来

    1.1K20
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券