Forum Moderators: open
is there anybody who has an idea what to do with this?:
I have an element. TR. It has a chekbox inside. When I define an onclick on the tr tag, it works fine.
But when I click on the checkbox which is inside the tr, after handling the "check" event, the onclick event starts for the tr tag also, so the page will be directed to the location.
How could I prevent the TR onclick event for the checkbox?
Any idea would be apprreciated very much!
Gregor
<td onclick="document.location.href='url.html';">
.....
<input type="checkbox"
.....
</td>
This is worth a try, however this may bypass normal onclick handling of checkbox, you may need extra code prior to 'return false;'
Welcome to forum
Thanks for the response, but it does not solves the problem. Here is it exactly. When you click inside the box, the message appears. When you click on the checkbox, then the message also appears, because the chekcbox is also inside the tr tag. I would like to avoid the handling of onclick event for the tr tag when I click the chekbox.
Guys, does anybody has any other idea?
<table>
<tr onmouseover="this.style.backgroundColor='#ff0000;'" onmouseout="this.style.backgroundColor='#ffffff;'"
onclick="alert('I hope this came outside of the checkbox...');">
<td style="width:200px; height:50px; border:1px solid #000000;">
<input type="checkbox" onclick="return false;">
</td>
</tr>
</table>
This does the trick.
<html>
<head>
<title>Stop Bubbling</title>
<script type="text/javascript">
if(document.implementation && document.implementation.hasFeature &&
document.implementation.hasFeature('HTML','')){
onload=function(){
var A=document.getElementsByTagName('tr');
var L=A.length,hoo,cb;
var str=('This did not come from the checkbox...');
for(var i=0;i<L;i++){
hoo=A[i];
hoo.onmouseover=function(e){
e= (window.event)? event.srcElement: e.target;
e.style.backgroundColor='red';
}
hoo.onmouseout=function(e){
e= (window.event)? event.srcElement: e.target;
e.style.backgroundColor='white';
}
hoo.onclick=function(){alert(str)};
cb=hoo.getElementsByTagName('input')[0];
if(cb)cb.onclick= function(e){
if(window.event) event.cancelBubble= true;
else if(e.cancelable)e.stopPropagation();
}
}
}
}
</script>
</head>
<body>
<table style="width:200px;border:1px solid #000000;padding:0" cellspacing="0">
<tbody>
<tr >
<td style="width:200px;height:50px;;border:1px solid #000000 ">
<input type="checkbox" >
</td>
</tr>
</tbody>
</table>
</body>
</html>
function trClick(e) {
var e= (window.event)? event.srcElement: e.target;
if ( e.tagName!= 'INPUT' ) {alert('I hope this came outside of the checkbox...'); }
}
Cancelling the events seems to be professional, but I like best the last solution. I will try it soon. - Thanks Dave!
G.
