Created by Jerry Wang, last modified on Oct 10, 2014
Test code:
<html>
< script SRC = “C: \ Users \ i042416 \ Desktop \ jquery_1 7.1 js” >
</script>
<script>
$(document).ready(function() {
$(“#test”).click( function (){
alert(“four”);
//return false;
});
});
function iamtwo(e) {
alert(“two”);
//stopBubble(e);
}
function iamthree(e) {
alert(“three”);
//stopBubbleDefault(e);
}
function stopBubble(e) {
var evt = e||window.event;
evt.stopPropagation? evt.stopPropagation():( evt.cancelBubble = true );
}
function stopBubbleDefault(e) {
var evt = e||window.event;
evt.stopPropagation? evt.stopPropagation():( evt.cancelBubble = true );
evt.preventDefault();
}
</script>
<body>
The < div &western nclick = “alert (‘ outermost ‘);” >Outermost
The < div &western nclick = “alert (‘ middle ‘);” > middle
The < div &western nclick = “alert (‘ inner ‘);” >inner</div>
The < div &western nclick = “iamtwo (event)” > two < / div >
< p > < a href = “www.baidu.com” &western nclick = “iamthree (event)” > three < / a > < / p >
<p id=”test”><a href=” www.baidu.com”>four</a></p>
</div> <! — end of middle ! –>
</div> <! — end of outermost ! –>
</body>
</html>
There are six elements on the UI:
Outermost: The alert Dialog with the Outermost word pops up
Click middle: The middle, outerMost dialog is displayed
Click inner: pop-up inner, middle, outermost dialog
Click two: popup two, middle, outerMost dialog
Click on three to pop-up the three, middle, outermost dialog, then navigate to the Baidu webpage
Click on four to pop-up the four, middle, outermost dialog, then navigate to the Baidu webpage
Uncomment the stopBubble line in the Click Handler iamTwo if you don’t want the click event to bubble up to the parent Hierarchy, and then click and only two Dialog will appear:
For the tag A element three, the event preventDefault() method should be called to prevent browser navigate from the default behavior of the Baidu website:
If you are using jQuery’s click method, return false in the event handler:
\
For more of Jerry’s original articles, please follow the public account “Wang Zixi “:
