Response title
This is preview!
Move this topic
Bubbling up?
in Using jQuery
•
6 years ago
Hello,
I was reading a tutorial on event bubbling. It comes with this illustration: Forget about 3B unless it is needed.
I can't figure out how the code would work for this. I was thinking something like
1. I'm A and I was clicked.
2. I'm P and I know A was just clicked because A told me..
3. I'm Document and I just got my info from P.
I believe the doc structure would look like this:
<body>
<p> < a > click here </a> </p>
</body>
Can anyone reproduce this in jQuery?
Thanks,
Jim
I was reading a tutorial on event bubbling. It comes with this illustration: Forget about 3B unless it is needed.
I can't figure out how the code would work for this. I was thinking something like
1. I'm A and I was clicked.
2. I'm P and I know A was just clicked because A told me..
3. I'm Document and I just got my info from P.
I believe the doc structure would look like this:
<body>
<p> < a > click here </a> </p>
</body>
Can anyone reproduce this in jQuery?
Thanks,
Jim
1
Replies(10)
Re: Bubbling up?
6 years ago
Here's a demo of bubbling clicks. See them Bubble. Does it help understand the bubbling?
JΛ̊KE
JΛ̊KE
Re: Re: Bubbling up?
6 years ago
Yes it does. I actually believed the code for this using psuedo code would be if you could picture
3 nested loops say with i, j ,k so there would be at least 6 lines of code needed. So the selector
and I am assuming in the correct order creates the bubbling, as in $('a,p,body') .
Thanks Jake.
3 nested loops say with i, j ,k so there would be at least 6 lines of code needed. So the selector
and I am assuming in the correct order creates the bubbling, as in $('a,p,body') .
Thanks Jake.
Re: Re: Bubbling up?
6 years ago
It's strictly hierarchical. The element then the element's parent and all the way up to <body> and <html>.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Bubbling up?
6 years ago
Jake based on your explanation I was able to construct an example which highlights the key points that I could not grasp. I am sure this is more to this but this may help someone who is trying to understand basic bubbling of events: View this in Chrome Dev Tools
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bubbling Up</title>
<style>
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<h1>Heading One <p>A para with bolded text in it <strong>bold para text <i>and click me</i></strong>.</p></h1>
<script>
var cnt=0;
// Register click handlers for each node so i, strong , p , h1, body are clickable
// It seems body is NOT clickable - not sure why
$('i, strong, p, h1,body').click(function(e){
console.log("TEXT AT THIS NODE= ",$(this).text()," ORIGINAL EVENT =",e.target, " CURRENT TARGET =", event.currentTarget, " NUMBER OF BUBBLE UP PHASES THAT TOOK PLACE = ", ++cnt-1);
// add a class of howdy to current target so if h1 happens to be the current target add the class howdy
$(event.currentTarget).addClass("howdy");
console.log( " JUST ADDED HOWDY CLASS TO" , e.currentTarget , "AND THE CNT = ", cnt);
// And the howdy class gets added to i , strong, p , h1 , body ONLY IF the click on i takes place.
//But here is the caveat, if say p is clicked then since i and strong are lower in the DOM tree then the howdy class never gets applied to i and strong.
})
</script>
</body>
</html>
Update: For some reason the body never console.logs as being the target of the click event, not sure why?
Jim
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bubbling Up</title>
<style>
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<h1>Heading One <p>A para with bolded text in it <strong>bold para text <i>and click me</i></strong>.</p></h1>
<script>
var cnt=0;
// Register click handlers for each node so i, strong , p , h1, body are clickable
// It seems body is NOT clickable - not sure why
$('i, strong, p, h1,body').click(function(e){
console.log("TEXT AT THIS NODE= ",$(this).text()," ORIGINAL EVENT =",e.target, " CURRENT TARGET =", event.currentTarget, " NUMBER OF BUBBLE UP PHASES THAT TOOK PLACE = ", ++cnt-1);
// add a class of howdy to current target so if h1 happens to be the current target add the class howdy
$(event.currentTarget).addClass("howdy");
console.log( " JUST ADDED HOWDY CLASS TO" , e.currentTarget , "AND THE CNT = ", cnt);
// And the howdy class gets added to i , strong, p , h1 , body ONLY IF the click on i takes place.
//But here is the caveat, if say p is clicked then since i and strong are lower in the DOM tree then the howdy class never gets applied to i and strong.
})
</script>
</body>
</html>
Update: For some reason the body never console.logs as being the target of the click event, not sure why?
Jim
Re: Re: Bubbling up?
6 years ago
Build your demos in jsfiddle.net or on your server, as it is a pain to recreate a page. You can start from the fiddle I made and change it around completely.
JΛ̊KE
JΛ̊KE
Leave a comment on coldfusionguy's reply
Re: Bubbling up?
6 years ago
Jake,
I created a jsfiddle and hopefully the fiddle is correct, I am still left with why the body tag is not clickable.
http://jsfiddle.net/2fgs2/1/
Thanks,
Jim
Update: Maybe body can be notified of the click event but body cannot be the click event?
I created a jsfiddle and hopefully the fiddle is correct, I am still left with why the body tag is not clickable.
http://jsfiddle.net/2fgs2/1/
Thanks,
Jim
Update: Maybe body can be notified of the click event but body cannot be the click event?
Leave a comment on coldfusionguy's reply
Re: Bubbling up?
6 years ago
Take a look at http://jsfiddle.net/jakecigar/2fgs2/2/
I added a return false to stop the bubbling, and switched the fiddle to one with fireBug lite built in.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Bubbling up?
6 years ago
Jake can't find this: --> I found it
Take a look at http://jsfiddle.net/jakecigar/2fgs2/2/
But what is confusing me right now is why:
$('body').click(function() {
alert('hi');
});
This doesn't execute in my fiddle? I know it is slightly off topic but I added it to try to figure out why the click event doesn't fire on this simple code?
I guess the only thing I still don't get is why:
$('em, i, strong, p, h1, body').click(function(e){
Does not allow my fiddle to click on the body? I mean I can click on, em, i , strong, p, h1 and they all work as expected.
Jim
Take a look at http://jsfiddle.net/jakecigar/2fgs2/2/
But what is confusing me right now is why:
$('body').click(function() {
alert('hi');
});
This doesn't execute in my fiddle? I know it is slightly off topic but I added it to try to figure out why the click event doesn't fire on this simple code?
I guess the only thing I still don't get is why:
$('em, i, strong, p, h1, body').click(function(e){
Does not allow my fiddle to click on the body? I mean I can click on, em, i , strong, p, h1 and they all work as expected.
Jim
Leave a comment on coldfusionguy's reply
Re: Bubbling up?
6 years ago
I commented out the body click /* … */.
JΛ̊KE
I prefer console.log because alert stops the browser in midstream.
I added a section that, when clicked bubbles it up to the body, and adds/removes the howdy class.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Bubbling up?
6 years ago
OK Jake I got it I needed to just add body text separate from the all the stuff in the H1 tag. I thought by merely clicking on the body with nothing there* that would trigger the body click event. Also thanks for the additional info on return false. I was getting to that and also stop propagation on Sat.
Thanks,
Jim
*Nothing there means besides the big H1 tag.
Thanks,
Jim
*Nothing there means besides the big H1 tag.
Leave a comment on coldfusionguy's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to coldfusionguy's question
Statistics
- 10 Replies
- 2991 Views
- 1 Followers