Home > Developer > JavaScript
1. Block event bubbling, making it a catch-type event trigger mechanism.
1 functionstopbubble (e) {2 //If an event object is provided, this is a non-IE browser3 if(e &&e.stoppropagation)4 //so it supports the Stoppropagation () method5 e.stoppropagation ();6 Else7 //Otherwise, we need to use IE to cancel the event bubbling8Window.event.cancelBubble =true; 9}
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.
1 //prevent Browser from default behavior2 functionStopdefault (e) {3 //block default browser action (web)4 if(e &&E.preventdefault)5 E.preventdefault ();6 //how to block the default action of a function in IE7 Else8Window.event.returnValue =false; 9 return false; Ten}
So let's look at the effect of function one in the following section of code:
1<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">23 45<meta content= "text/html; Charset=utf-8 "http-equiv=" Content-type "/>6<title> Effects Testing </title>7<script language= "javascript" type= "Text/javascript" src= "Jquery-1.4.2.js" ></script>8<script language= "javascript" type= "Text/javascript" >9$ (document). Ready (function()Ten { One$ (' Div.c1 '). Click (function(e) {alert (' clicked Div ');}); A$ (' div.c2 '). Click (function(e) {alert (' clicked Div '); stopbubble (e);}); -$ (document). Click (function(e) {Alert (' Click Document ');}); -$ (' #txt1 '). Val (' 123 '); the$ (' #txt1 '). Click (function(e) {stopbubble (e);}); -$ (' #txt1 '). KeyDown (function(e) {Stopdefault (e); alert (' You pressed the key value ' +E.keycode); }); - }) - + functionstopbubble (e) { - //If an event object is provided, this is a non-IE browser + if(e &&e.stoppropagation) A //so it supports the Stoppropagation () method at e.stoppropagation (); - Else - //Otherwise, we need to use IE to cancel the event bubbling -Window.event.cancelBubble =true; - } - //prevent Browser from default behavior in functionStopdefault (e) { - //block default browser action (web) to if(e &&E.preventdefault) + E.preventdefault (); - //how to block the default action of a function in IE the Else *Window.event.returnValue =false; $ return false; Panax Notoginseng } -</script> the<style type= "Text/css" > + body{ Afont-size:14px; the } + } - . c1{ $font-family: "Arial Unicode MS" $ } - . c2{ -font-Family:helvetica,simsun,arial,clean the } -</style>Wuyi the -<body> Wu -<div class= "C1" > Test the text, here is the style C1, click to trigger the event in the form of bubbling .</div> About $<div class= "C2" > Test the text, here is the style C2, click to capture the form to trigger the event .</div> - -<div><input id= "Txt1" name= "Text1" type= "text"/></div> - A</body> +
JavaScript blocks event bubbling and browser default behavior
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
