How to disable onClick event

Answer!
Add to 'Watch list'
Send to a friend E-mail

Asked by: milen
Published on: 09:42/15.02.2008
Status: OPEN

I have embedded div in another div. In the parent DIV element I have placed onClick event but I want to disable that event for the inner DIV. How can I do that?


<div onclick="goToURL()">
    <div>Don't goToURL() on onClick</div>
</div>

Send to a friend E-mail

Answer by: xpert
Posted on: 09:42/15.02.2008
Rating: 2.2 from possible 5 with 8 votes

You can use property "cancelBubble" to stop propagating the event to parent layer. I made sample with two layers with different border. This solution works on IE, FFox, Opera, Safari. don't use "window.event" as this is not recognised by FFox. Here it is :


<html>
<head>

</head>    
<body>
<div onclick="alert('outer');"  style="border:1px solid red;">    
    <div onclick="event.cancelBubble = true; return false;" 
         style="border:1px solid green;margin:10px;">
            Don't goToURL() on onClick
    </div>
</div>
</body>
</html>