By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,611 Members | 1,642 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,611 IT Pros & Developers. It's quick & easy.

how can i stop this??

P: n/a
I have some example code below where, when I click on the background of
the table I want one thing to happen (wilma), and when I click on the
text box I want one different thing to happen (fred).

....but when I click on the text box, both happen (fred, then wilma). I'm
guessing this is to do with event bubbling but I could be thoroughly
mistaken. Anyway, how can I stop it so when I click on the text box only
fred occurs?

<html>
<head>
<style>
table#wilma {
border-color: green;
border-style: solid;
border-width: 2px;
}
</style>
<script>
function init() {
document.getElementById("fred").onclick = function() { alert("fred"); };
document.getElementById("wilma").onclick = function() { alert("wilma"); };
}
</script>
</head>
<body onload="init();">
<form id="test" action="" method="post">
<table id="wilma">
<tr><td>&nbsp;</td></tr>
<tr><td><input type="text" name="fred" id="fred" value="testing"></td></tr>
<tr><td>&nbsp;</td></tr>
</table>
</form>
</body>
</html>
TIA

Ian
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Ian Richardson wrote on 07 feb 2004 in comp.lang.javascript:
I have some example code below where, when I click on the background
of the table I want one thing to happen (wilma), and when I click on
the text box I want one different thing to happen (fred).

...but when I click on the text box, both happen (fred, then wilma).
I'm guessing this is to do with event bubbling but I could be
thoroughly mistaken. Anyway, how can I stop it so when I click on the
text box only fred occurs?

<html>
<head>
<style>
table#wilma {
border-color: green;
border-style: solid;
border-width: 2px;
}
</style>
<script>
function init() {
document.getElementById("fred").onclick = function() { alert("fred");
}; document.getElementById("wilma").onclick = function() {
alert("wilma"); };
}
</script>
</head>
<body onload="init();">
<form id="test" action="" method="post">
<table id="wilma">
<tr><td>&nbsp;</td></tr>
<tr><td><input type="text" name="fred" id="fred"
value="testing"></td></tr> <tr><td>&nbsp;</td></tr>
</table>
</form>
</body>
</html>


<script>
var z=true
function init() {
document.getElementById("fred").onclick =
function() { alert("fred");z=false };
document.getElementById("wilma").onclick =
function() { if(z)alert("wilma");z=true };
}
</script>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 20 '05 #2

P: n/a
Evertjan. wrote:
<script>
var z=true
function init() {
document.getElementById("fred").onclick =
function() { alert("fred");z=false };
document.getElementById("wilma").onclick =
function() { if(z)alert("wilma");z=true };
}
</script>


Trust me to be thinking about a complex solution when an idiotically
simple one will do!!

I'll crawl under my rock again!

Ian
Jul 20 '05 #3

P: n/a
Another more direct way to do this might be to update Fred's onclick
assignment like so:

document.getElementById("fred").onclick = function() { alert("fred");
window.event.cancelBubble = true; };

Note that this syntax is IE-specific. Netscape 6 and 7 can do something
similar, but the syntax is different.

OTOH, what Evertjan suggested will likely work just as well. :-)

- Tom Kiefer
thogek @ earthlink . net
"Ian Richardson" <za*****@chaos.org.uk> wrote in message
news:c0*************@ID-99375.news.uni-berlin.de...
I have some example code below where, when I click on the background of
the table I want one thing to happen (wilma), and when I click on the
text box I want one different thing to happen (fred).

...but when I click on the text box, both happen (fred, then wilma). I'm
guessing this is to do with event bubbling but I could be thoroughly
mistaken. Anyway, how can I stop it so when I click on the text box only
fred occurs?

<html>
<head>
<style>
table#wilma {
border-color: green;
border-style: solid;
border-width: 2px;
}
</style>
<script>
function init() {
document.getElementById("fred").onclick = function() { alert("fred"); };
document.getElementById("wilma").onclick = function() { alert("wilma"); };
}
</script>
</head>
<body onload="init();">
<form id="test" action="" method="post">
<table id="wilma">
<tr><td>&nbsp;</td></tr>
<tr><td><input type="text" name="fred" id="fred" value="testing"></td></tr> <tr><td>&nbsp;</td></tr>
</table>
</form>
</body>
</html>
TIA

Ian

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.