Block event bubbling and browser default behavior in JS

Last Update:2017-06-03 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The problem with JavaScript programming is that when you add an event to HTML, it triggers the event that you don't want to trigger because the browser defaults to the bubbling event trigger mechanism. The following function can be used to solve the problem. [Compatible with IE and FF]

1. Block event bubbling, making it a catch-type event trigger mechanism.

function Stopbubble (e) {//If an event object is provided, this is a non-IE browser if (e && e.stoppropagation)     ///So it supports the stoppropagation () Method     e.stoppropagation (); Else     //Otherwise, we need to use IE to cancel event bubbling     window.event.cancelBubble = true;}

2. You can suppress the return value when you press the key and do not want the key to continue to be passed to the HTML text box object. That is, the default event default behavior is stopped.

Block browser default behavior function Stopdefault (e) {     //block default browser action (web)     if (e && e.preventdefault)         E.preventdefault ();     The way in IE to block the default action of the function     else         window.event.returnValue = false;     return false; }

So let's look at the effect of function one in the following section of code:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162 <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"> <head><metacontent="text/html; charset=utf-8" http-equiv="Content-Type" /><title>效果测试</title><scriptlanguage="javascript" type="text/javascript" src="jquery-1.4.2.js"></script><scriptlanguage="javascript" type="text/javascript">$(document).ready(function(){$(‘div.c1‘).click(function(e){alert(‘单击了div‘);});$(‘div.c2‘).click(function(e){alert(‘单击了div‘);stopBubble(e);});$(document).click(function(e){alert(‘单击了document‘);});$(‘#txt1‘).val(‘123‘);$(‘#txt1‘).click(function(e){stopBubble(e);});$(‘#txt1‘).keydown(function(e){stopDefault(e);alert(‘你按下了键值‘+e.keyCode); });}) function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } //阻止浏览器的默认行为 function stopDefault( e ) { //阻止默认浏览器动作(W3C) if ( e && e.preventDefault ) e.preventDefault(); //IE中阻止函数器默认动作的方式 else window.event.returnValue = false; return false; }</script><styletype="text/css">body{font-size:14px; }}.c1{ font-family:"Arial Unicode MS" }.c2{ font-family:helvetica,simsun,arial,clean }</style></head><body> <divclass="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/><divclass="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/><div><inputid="txt1" name="Text1" type="text" /></div><hr/></body></html>

In the effect test above,

Function One: Ie6.0,firefox,chrome,opera are valid

Function two: in IE, the test effect is very good; Chrome,opera invalid, in FF, when the key is pressed, if the

$ (' #txt1 '). KeyDown (function (e) {Stopdefault (e); alert (' You pressed the key value ' +e.keycode);});

This sentence hit a breakpoint in the execution, you can achieve the effect. But if you do not break the point is not effective, did not find out the specific reasons, if you know can be said to talk about it.

Another need to say is that the application of the jquery library, just started learning, so here to apply a bit. It is simple operation. should be able to read.

Another reference: http://ooxxab.com/javascript-event-bubbling-and-prevent-the-default-behavior-of-the-browser.html

Block event bubbling and browser default behavior in JS

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More