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

Groups > comp.lang.javascript > #34147

Re: stopImmediatePropogation

Show all headers | View raw

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,

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

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

csiph-web