abrakatabra Posted December 7, 2009 Share Posted December 7, 2009 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 picNow 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? Link to comment Share on other sites More sharing options...
abrakatabra Posted December 7, 2009 Author Share Posted December 7, 2009 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 More sharing options...
jeffman Posted December 7, 2009 Share Posted December 7, 2009 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 More sharing options...
abrakatabra Posted December 7, 2009 Author Share Posted December 7, 2009 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! Link to comment Share on other sites More sharing options...
jeffman Posted December 7, 2009 Share Posted December 7, 2009 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. Link to comment Share on other sites More sharing options...
abrakatabra Posted December 7, 2009 Author Share Posted December 7, 2009 (And if you want to make friends on this list, you will not go around saying things like "You are wrong." Discuss someone's answer, not them personally.)I am really sorry! It is just bad language knowledge. Link to comment Share on other sites More sharing options...
abrakatabra Posted December 7, 2009 Author Share Posted December 7, 2009 Dude, I tested it. Now 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.Unfortunatly I have not Mac OS. Many thanks to notice that! Link to comment Share on other sites More sharing options...
jeffman Posted December 7, 2009 Share Posted December 7, 2009 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 More sharing options...
abrakatabra Posted December 7, 2009 Author Share Posted December 7, 2009 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.