Jump to content

How To Disable Event Handling Of Tag


abrakatabra
 Share

Recommended Posts

Hello!There is a simple code below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>	<title></title>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	<style type="text/css">		#a {			/*background:black;*/			position:absolute;			padding: 30px;			border: solid 1px black;		}		#b{			background:white;		}	</style>  </head>  <body>	  <div id="a" onmousedown="alert('a')">		  <textarea id="b" name="" rows="4" cols="20" onmousedown="alert('b')"></textarea>	  </div>  </body></html>

this code shows textarea inside of div. see picbd07fd02.jpgNow when I click on the div id="a" out of textarea I can see alert box with 'a' and when I click on the textarea I whould like to see just 'b' . But my code allow me to see 'b' and then 'a' when I click on the textarea. Can you please to help me to avoid such behaviour?

Edited by Alexander
Link to comment
Share on other sites

I have found one solution:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>	<title></title>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	<style type="text/css">		#a {			/*background:black;*/			position:absolute;			padding: 30px;			border: solid 1px black;		}		#b{			background:white;		}	</style>				<script type="javascript">								var handledown = true;				</script>  </head>  <body>	  <div id="a" onmousedown="if(handledown){alert('a')}">		  <textarea id="b" name="" rows="4" cols="20" onmousedown="handledown=false;alert('b');" onmouseup="handledown=true;"></textarea>	  </div>  </body></html>

I set global variable from textarea to false. div element check this and does not show alert box with 'a' message.Are there any other solutions?

Link to comment
Share on other sites

1. That technique doesn't actually work, at least not in Firefox.2. The problem is referred to as event bubbling. You need to trap that event before it hits the outer div. You can read about the phenomenon here: http://www.quirksmode.org/js/events_order.htmlOr just jump to the solution. Search that page for this text: "For a complete cross-browser experience do"

Link to comment
Share on other sites

1. That technique doesn't actually work, at least not in Firefox.
I have tested my solution on IE, FF, Opera & Konqueror, for those browsers it works fine.
2. The problem is referred to as event bubbling. You need to trap that event before it hits the outer div. You can read about the phenomenon here: http://www.quirksmode.org/js/events_order.htmlOr just jump to the solution. Search that page for this text: "For a complete cross-browser experience do"
Thank you so much! Edited by Alexander
Link to comment
Share on other sites

You are wrong if you think my solution does not work in FF. I have tested on IE, FF, Opera & Konqueror, for those browsers it works fine.
It could be that FF works differently on my Mac than on a PC. I don't know. The point is, if it doesn't work on one major system, there is a problem. Edited by Deirdre's Dad
Link to comment
Share on other sites

I am really sorry! :) It is just bad language knowledge.
Ah, I get tense in the mornings. No sweat.Event capturing is the correct technique, but as you see from the link, Microsoft doesn't play friendly with the other kids on the block. The old version of IE, anyway. I don't know about IE8. Be sure to test it as many browsers as you can.
Link to comment
Share on other sites

Event capturing is the correct technique, but as you see from the link, Microsoft doesn't play friendly with the other kids on the block. The old version of IE, anyway. I don't know about IE8. Be sure to test it as many browsers as you can.
Thank you for the advice. Edited by Alexander
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...