...

View Full Version : Stopping an onclick link on a div inside the linked div



tomsace
03-01-2012, 06:20 PM
Hello everyone!

First of all let me introduce myself as this is my first post on the coding forums! My name's Tom, I live in Sheffield, England and I'm 21 years old.

Anyway, I have a little problem on a project I'm working on. I have a div set with an onclick link (onclick="location.href='http://www.google.com/';"). Thats not the problem, that works fine. The problem I'm having is that I then have another div inside this div that I don't want to be linked at all but the outer div's link seems to still be active on the inner one.

Does anyone have any idea how to stop the link on the inner div whilst still keeping the outer div linked?

Thanks alot for any help,
Regards,
Tom.

devnull69
03-01-2012, 06:31 PM
I don't know of a way to stop the event propagation from the inner to the outer div with only the onclick attribute.

In all modern browsers you can use addEventListener instead. With the help of the implicit event object parameter you can stop the event propagation from the inner to the outer div


document.getElementById('outer').addEventListener('click', function(e) {
alert('triggered');
}, false);

document.getElementById('inner').addEventListener('click', function(e) {
e.stopPropagation();
}, false);


Example: http://jsbin.com/udujen

tomsace
03-01-2012, 07:08 PM
Thanks for the help, using your code I managed to do what I needed, I put your code inside an onclick on the div, like this:


<div onclick="this.addEventListener('click', function(e) { location.href='http://www.google.com/'; }, false);">

It all works nicely, except for some reason, you need to double click the outer div for it to take you to the next page, any ideas why this is happening?

Thanks alot,
Regards,
Tom.

devnull69
03-02-2012, 07:11 AM
You are assigning an onclick event handler to the element. So on click it will execute the code string. Inside this code string you are assigning another click event handler to the same element that will only fire after the next click.

There is no need for the onclick attribute when using addEventListener. You'll have to attach the event listener after page load and maybe take care of some legacy browsers


window.onload = function() {
var inner = document.getElementById('inner');
var outer = document.getElementById('outer');
if(window.addEventListener) {
inner.addEventListener('click', eventHandlerInner, false);
outer.addEventListener('click', eventHandlerOuter, false);
} else {
inner.attachEvent('onclick', eventHandlerInner);
outer.attachEvent('onclick', eventHandlerOuter);
}
};

function eventHandlerOuter() {
location.href = "http://www.google.com";
}

function eventHandlerInner(e) {
if(!e) e=window.event;
e.preventDefault();
}

tomsace
03-02-2012, 05:37 PM
Thanks alot for all your help, got it working perfectly.

Just one thing, is this method good in only new(ish) browsers or does it work as far back as say IE6 etc..

Regards,
Tom.

felgall
03-02-2012, 07:31 PM
Thanks alot for all your help, got it working perfectly.

Just one thing, is this method good in only new(ish) browsers or does it work as far back as say IE6 etc..

Regards,
Tom.

For it to work in IE8 and earlier you need to use the Internet Explorer equivalents attachEvent and cancelBubble for those browsers

See http://javascriptexample.net/events01.php for code to combine addEventListener and attachEvent

and see http://javascriptexample.net/events03.php for code to combine stopPropogation and cancelBubble



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum