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> </td></tr>
<tr><td><input type="text" name="fred" id="fred" value="testing"></td></tr>
<tr><td> </td></tr>
</table>
</form>
</body>
</html>
TIA
Ian
