search
HomeWeb Front-endJS TutorialJs bubbling event detailed explanation and blocking example_javascript skills

The JS bubbling mechanism means that if an element defines an event A, such as a click event, and if the event is triggered and the bubbling event is not blocked, the event will propagate to the parent element and trigger the click function of the parent class.
As shown in the following example:

Copy the code The code is as follows:



<script> <BR>function ialertdouble(e) { <BR> alert('innerdouble'); <BR>stopBubble(e); <BR>} <br><br>function ialertthree(e) { <BR>alert('innerthree'); <BR>stopBubbleDouble(e); <BR>} <br><br>function stopBubble(e) { <BR>var evt = e||window.event; <BR>evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble=true);/ /Stop bubbling<BR>} <br><br>function stopBubbleDouble(e) { <BR>var evt = e||window.event; <BR>evt.stopPropagation?evt.stopPropagation():(evt.cancelBubble =true);//Prevent bubbling<BR>evt.preventDefault();//Prevent the browser’s default behavior so that the link will not jump<BR>} <br><br>$(function() { <BR>//Method 1<BR>//$('#jquerytest').click(function(event) { <BR>// alert('innerfour'); <BR>// event.stopPropagation(); <BR>// event.preventDefault(); <BR>//}); <br><br>//Method 2<BR>$('#jquerytest').click(function() { <BR>alert( 'innerfour'); <BR>return false; <BR>}); <BR>}); <BR></script>
without
middle
inner

innerdouble

innerthree< ;/a>


innerfour






When you click inner, 'inner', 'middle' will pop up in sequence and 'without'. This is event bubbling.

Intuitively, this is also the case, because the innermost area is in the parent node. Clicking the area of ​​the child node actually clicks the area of ​​the parent node, so the event will Spread it.

Actually, many times, we don’t want events to bubble up, because this will trigger several events at the same time.

Next: we click innerdouble. You will find that she does not bubble because she calls the stopBubble() method in the calling method ialertdouble(). The method prevents bubbling by determining the browser type (Ie uses cancleBubble(), Firefox uses stopProgation()).

But if it is a link, we will find that it will also prevent bubbling, but will jump. This is the default behavior of the browser. You need to use the preventDefault() method to prevent it. See ialertthree() for details.

Currently, the mainstream method is to use jquery to bind click events. In this case, it will be much simpler.

We can pass in the parameter event when clicking the event, and then directly

event.stopPropagation();
event.preventDefault(); //No need to add this if there is no link.

That’s it.

The framework is good, but there is actually an easier way, returning false in the event handler. This is a shorthand way of calling stopPropagation() and preventDefault() on the event object at the same time.
[See the detailed code above, remember to load jquery.js. ]

In fact, you can also add judgment to each click event:
Copy code The code is as follows:

$('#id').click(function(event){
if(event.target==this){
//do something
}
})

Analysis: The variable event in the event handler stores the event object. The event.target attribute stores the target element where the event occurred. This attribute is specified in the DOM API, but is not implemented by all browsers. jQuery makes the necessary extensions to this event object so that this property can be used in any browser. With .target, you can determine the element in the DOM that first received the event (i.e. the element that was actually clicked). Moreover, we know that this refers to the DOM element that handles the event, so we can write the above code.

However, it is recommended to use return false if Jquery binds events.
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
如何在 Edge 中阻止对网站的访问如何在 Edge 中阻止对网站的访问Jul 12, 2023 am 08:17 AM

有时,出于多种原因,我们希望在MicrosoftEdge上阻止某些网站,无论是出于家长控制,时间管理,内容过滤,甚至是安全问题。一个常见的动机是提高生产力并保持专注。通过阻止分散注意力的网站,人们可以创造一个有利于工作或学习的环境,最大限度地减少潜在的干扰。最后,内容过滤对于维护安全和尊重的在线环境非常重要。阻止包含露骨、冒犯性或令人反感内容的网站在教育或专业环境中尤其重要,在这些环境中,维护适当的标准和价值观至关重要。如果您可以与这种情况相关,那么本文适合您。下面介绍了如何在Edge中阻止对网

闭包中如何有效避免内存泄漏?闭包中如何有效避免内存泄漏?Jan 13, 2024 pm 12:46 PM

如何在闭包中阻止内存泄漏的发生?闭包是JavaScript中非常强大的特性之一,它能够实现函数的嵌套和数据的封装。然而,闭包也容易导致内存泄漏的问题,特别是在处理异步和定时器的情况下。本文将介绍如何在闭包中阻止内存泄漏,并提供具体的代码示例。内存泄漏通常发生在不再需要某个对象时,却因为某些原因无法释放其所占用的内存。在闭包中,当函数引用外部的变量,而这些变量

如何在iPhone上阻止短信如何在iPhone上阻止短信Jul 31, 2023 pm 09:49 PM

如何阻止来自iPhone上某人的短信?如果您收到来自要阻止的人的短信,则需要在iPhone上打开该消息。打开消息后,单击顶部的图标,其下方是手机号码或发件人姓名。现在点击信息在屏幕的右侧;现在,您将看到另一个屏幕,其中包含阻止此呼叫者的选项。单击此按钮,然后选择阻止联系人。该电话号码将无法再向您发送短信;它也将被阻止拨打您的iPhone。如何在iPhone上取消阻止被阻止的联系人?如果您决定允许被屏蔽的人向您发送信息,您可以随时在iPhone上取消阻止他们。要在iPhone上取消阻止联系人,您需

不支持冒泡的事件:局限性及范围不支持冒泡的事件:局限性及范围Jan 13, 2024 pm 12:51 PM

冒泡事件(BubblingEvent)是指在DOM树中从子元素向父元素逐级触发的一种事件传递方式。大多数情况下,冒泡事件具有很好的灵活性和可扩展性,但是也存在一些特殊情况,这些情况下事件不支持冒泡。一、哪些事件不支持冒泡?虽然大部分的事件都支持冒泡,但存在一些事件是不支持冒泡的。以下是一些常见的不支持冒泡的事件:focus和blur事件load和unloa

什么事件不能冒泡什么事件不能冒泡Nov 20, 2023 pm 03:00 PM

不能冒泡的事件有:1、focus事件;2、blur事件;3、scroll事件;4、mouseenter和mouseleave事;5、mouseover和mouseout事件;6、mousemove事件;7、keypress事件;8、beforeunload事件;9、DOMContentLoaded事件;10、cut、copy和paste事件等。

为何会有事件无法冒泡的情况出现?为何会有事件无法冒泡的情况出现?Jan 13, 2024 am 08:50 AM

为什么在某些情况下事件无法冒泡?事件冒泡是指当一个元素上的某个事件被触发时,该事件会从最内层的元素开始逐级向上传递,直到传递到最外层的元素。但是在某些情况下,事件不能冒泡,即事件只会在触发的元素上处理,不会传递到其他元素上。本文将介绍一些常见的情况,讨论为什么事件无法冒泡,并提供具体代码示例。使用事件捕获模式:事件捕获是另一种事件传递的方式,与事件冒泡相反。

冒泡事件的常见阻止方法有哪些?冒泡事件的常见阻止方法有哪些?Feb 19, 2024 pm 10:25 PM

常用的阻止冒泡事件指令有哪些?在Web开发中,我们经常会遇到需要处理事件冒泡的情况。当一个元素上触发了某个事件,比如点击事件,它的父级元素也会触发相同的事件。这种事件传递的行为称为事件冒泡。有时候,我们希望阻止事件冒泡,使事件只在当前元素上触发,并阻止其向上级元素传递。为了实现这个目的,我们可以使用一些常见的阻止冒泡事件的指令。event.stopPropa

解决Windows 10下载软件被阻止的方法解决Windows 10下载软件被阻止的方法Dec 21, 2023 pm 11:58 PM

我们在使用win10系统的时候,有些小伙伴就遇见了下载东西的时候被莫名拦截阻止。对于这种情况,小编觉得应该是系统防火墙的问题。可以尝试在注册表中进行相关的设置来解决问题,或者使用属性中的兼容模式打开软件等等方式解决问题。具体详细步骤就来和小编一起看一下吧~希望可以帮助到你。windows10下载软件被阻止怎么办方法一:兼容模式1、右键应用程序,点击菜单中的”属性”,选择”兼容性”页签,勾选“兼容模式”选项框。方法二:修改安全设置左下角找到“设置”,再找到“更新和安全”,最后找到“WindowsD

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),