Introduction to examples of js preventing bubbling and jquery preventing event bubbling_javascript skills

js prevents bubbling
In the process of preventing bubbling, W3C and IE adopt different methods, so we must make the following compatibility.

Copy code The code is as follows:

function stopPro(evt){
var e = evt || window.event;
//returnValue If this attribute is set, its value has a higher priority than the return value of the event handler. Set this attribute to fasle,
//You can cancel the default action of the source element where the event occurs.
//window.event?e.returnValue = false:e.preventDefault();
window.event?e.cancelBubble=true:e.stopPropagation();
}

Or:

Copy code The code is as follows:

function cancelBubble(e) {
var evt = e ? e : window.event;
if (evt.stopPropagation) {
//W3C
evt.stopPropagation();
}
else {
//IE
evt.cancelBubble = true;
}

JQuery provides two ways to prevent event bubbling.
Method 1: event.stopPropagation();

Copy code The code is as follows:

$("#div1").mousedown(function(event){
event.stopPropagation();
});

Method 2: return false;

Copy code The code is as follows:

$("#div1").mousedown(function(event){
return false;
});

Jquery blocks the default action, that is, notifies the browser not to perform the default action associated with the event.
For example:

Copy code The code is as follows:

$("a"). click(function(event){
event.preventDefault(); //Prevent the default action, that is, the link will not jump.
alert(4);//But this will also pop up
event.stopPropagation ();//Prevent bubbling events, the superior click event will not be called
return false;//Not only prevents the event from bubbling up, but also prevents the event itself
});

But there is a difference between these two methods. Returning false not only prevents the event from bubbling up, but also prevents the event itself. event.stopPropagation() only prevents the event from bubbling up, but does not prevent the event itself.
Scenario application: Google and Baidu's association boxes. When a drop-down list pops up, the user needs to keep the cursor in the text input box when pressing the mouse in the drop-down list area.
Jquery case:

Copy code The code is as follows:

aaaaaaa

baidu.com

js case:

Copy code The code is as follows:

function tt(){
alert("div");
}
function ttt(){
var e = arguments.callee. caller.arguments[0] || window.event;
window.event?e.returnValue = false:e.preventDefault();
alert(3);
window.event?e.cancelBubble: e.stopPropagation();
alert(4);
}

ccccc
baidu.com
< /div>

Related labels：

Prevent events from bubbling up Stop bubbling

source：php.cn

Previous article：Js remove spaces in string (implementation code)_javascript skills Next article：JS simple implementation of login verification with renderings_Basic knowledge

Statement of this Website

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

Latest Articles by Author

• Tame the Code Monster: A Fun and Friendly Approach to PHP
  2024-10-09 11:03:31
• BlackRock Labels BTC a Unique Diversifier
  2024-09-20 15:51:33
• Internet Computer (ICP) Price Prediction: Will ICP Price Hit $24?
  2024-09-20 15:47:32
• Worldcoin (WLD) Price Prediction 2022-23
  2024-09-20 15:45:32
• Top Meme Coins to Invest In Today
  2024-09-20 15:39:32
• Floki (FLOKI) Price Prediction: Will the Revamped Marketing Help Floki Catch Up on October Gains?
  2024-09-20 15:38:32
• Next Cryptocurrency to Explode: 5 Coins to Add to Your Watchlist
  2024-09-20 15:27:32
• Dogecoin: From an Internet Meme to a Digital Currency with a Billion-Dollar Market Capitalization
  2024-09-20 15:26:32
• ZChains Unveils a Series of Exciting Updates and Launches to Enhance Its Ecosystem
  2024-09-20 15:12:32
• How to download the Apple version of Little Fox Payment Platform
  2024-09-20 14:53:01

Latest Issues

Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...

From 2024-04-05 12:57:00

0

1

456

Content overflow in window prevents scrolling and hides new content I'm currently building a roulette system program (this is more to stop me from placing bet...

From 2024-04-03 21:24:55

0

1

285

How to scrape specific Google Weather text using BeautifulSoup? How to find the course text "New York City, USA" in Python using BeautifulSoup? ...

From 2024-04-01 14:06:14

0

1

308

Stop requesting script loading in HTML file I'm trying to prevent scripts from loading as HTML on my WordPress site. In my HTML file I...

From 2024-04-01 00:05:44

0

2

350

How to stop Javascript code from automatically converting hsl to rgb I have this code where I assign a color to an object and then use a condition to check if ...

From 2024-03-31 16:46:02

0

1

338

Related Topics

More>

• Word page number starts from the third page as 1 tutorial
• what does os mean
• Windows 11 my computer transfer to the desktop tutorial
• What are the cloud servers?
• How to delete a database
• How to shut down your computer quickly
• Turn off win10 automatic updates
• isp chip