Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #34117 > unrolled thread

stopImmediatePropogation

Back to article view | Back to comp.lang.javascript

Contents

  stopImmediatePropogation JRough <janis.rough@gmail.com> - 2017-10-16 15:42 -0700
    Re: stopImmediatePropogation "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-10-19 12:08 -0700
      Re: stopImmediatePropogation JRough <janis.rough@gmail.com> - 2017-10-19 17:02 -0700

#34117 — stopImmediatePropogation

Currently how these boxes work is if you click the green box you see the child clicked in console.   If you click red box you see both parent and child clicked in console.  I want to stop propogation so you only see parent clicked or child clicked in console.  I have a syntax error on the parentClicked listener.  I was tryiing to chain the console.log() method so I could see what is happening but it is giving me a syntax error.  tia,

<!DOCTYPE html>
<html>
	<body>
		<span onclick=parentClicked(event);
		      style= "position:absolute;left:0; top:0;display:block; width:100px; height:100px; background-color:green; position:0;" id="parent" >      	
		 </span>
		<span  onclick=childClicked(); 
	          style = "position:absolute;left:0;top:0;display:block; 
	          width:500px; height:200px; background-color:red;z-index:-1;"
	      </span>
		<script type="text/javascript">		
		var x = document.getelementById("parent");
		function parentClicked(event){ 
			x.addEventListener('click',e.stopImmediatePropogation().console.log("parent Clicked")},false)}
		function childClicked(){ console.log("child Clicked");}
	   </script>
	</body>
</html>

[toc] | [next] | [standalone]

#34137

On Monday, October 16, 2017 at 5:42:19 PM UTC-5, JRough wrote:
> Currently how these boxes work is if you click the green box you see the child clicked in console.   If you click red box you see both parent and child clicked in console.  I want to stop propogation so you only see parent clicked or child clicked in console.  I have a syntax error on the parentClicked listener.  I was tryiing to chain the console.log() method so I could see what is happening but it is giving me a syntax error.  tia,
> 
> <!DOCTYPE html>
> <html>
> 	<body>
> 		<span onclick=parentClicked(event);
> 		      style= "position:absolute;left:0; top:0;display:block; width:100px; height:100px; background-color:green; position:0;" id="parent" >      	
> 		 </span>
> 		<span  onclick=childClicked(); 
> 	          style = "position:absolute;left:0;top:0;display:block; 
> 	          width:500px; height:200px; background-color:red;z-index:-1;"
> 	      </span>
> 		<script type="text/javascript">		
> 		var x = document.getelementById("parent");
> 		function parentClicked(event){ 
> 			x.addEventListener('click',e.stopImmediatePropogation().console.log("parent Clicked")},false)}
> 		function childClicked(){ console.log("child Clicked");}
> 	   </script>
> 	</body>
> </html>

You have a casing issue:

var x = document.getelementById("parent");

use camel-casing, and a proper IDE or linter

[toc] | [prev] | [next] | [standalone]

#34147

On Thursday, October 19, 2017 at 12:08:51 PM UTC-7, Michael Haufe (TNO) wrote:
> On Monday, October 16, 2017 at 5:42:19 PM UTC-5, JRough wrote:
> > Currently how these boxes work is if you click the green box you see the child clicked in console.   If you click red box you see both parent and child clicked in console.  I want to stop propogation so you only see parent clicked or child clicked in console.  I have a syntax error on the parentClicked listener.  I was tryiing to chain the console.log() method so I could see what is happening but it is giving me a syntax error.  tia,
> > 
> > <!DOCTYPE html>
> > <html>
> > 	<body>
> > 		<span onclick=parentClicked(event);
> > 		      style= "position:absolute;left:0; top:0;display:block; width:100px; height:100px; background-color:green; position:0;" id="parent" >      	
> > 		 </span>
> > 		<span  onclick=childClicked(); 
> > 	          style = "position:absolute;left:0;top:0;display:block; 
> > 	          width:500px; height:200px; background-color:red;z-index:-1;"
> > 	      </span>
> > 		<script type="text/javascript">		
> > 		var x = document.getelementById("parent");
> > 		function parentClicked(event){ 
> > 			x.addEventListener('click',e.stopImmediatePropogation().console.log("parent Clicked")},false)}
> > 		function childClicked(){ console.log("child Clicked");}
> > 	   </script>
> > 	</body>
> > </html>
> 
> You have a casing issue:
> 
> var x = document.getelementById("parent");
> 
> use camel-casing, and a proper IDE or linter

thanks the linter helped a lot however there is 1 error left:
 bubbling.html:17 Uncaught TypeError: e.stopPropogation is not a function
    at HTMLSpanElement.parentClicked (bubbling_cog.html:17)
Why 

-----
<!DOCTYPE html>
<html>
	<body>
		<span 
		      style= "position:absolute;left:0; top:0;display:block; width:100px; height:100px; background-color:green; position:0;" id="parent" >    	
		 </span>
		<span   
	          style = "position:absolute;left:0;top:0;display:block; 
	          width:500px; height:200px; background-color:red;z-index:-1;">
	          </span>
		<script type="text/javascript">	
		"use strict";	
		var x = document.getElementById("parent");
			x.addEventListener('click',parentClicked,false);
		function parentClicked(e){ 
			
			e.stopPropogation();
             console.log('parent Clicked');
			}
var y = document.getElementById("child");
			y.addEventListener('click',childClicked,false);
		function childClicked(){ 
			console.log('child Clicked');
	            }
	   </script>
	</body>
</html>

IT was an exercise to only have the click event to be on one square or the other.  When I started out it was showing event on parent and child.  I want only child to be clicked and not parent or parent to be clicked and not child.  thnkx,

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web