Q:
How to prevent default on anchor click
I have a div I want to be clickable, however it also acts as a link. I need to prevent the default behaviour. For instance if I go to http://www.google.com and click my div the page still goes to google.com
my div:
In my css I have:
.map {
position:absolute;
z-index:99;
}
.map a {
position:relative;
}
Currently if I click anywhere in the div, it acts as a link and the page still goes to google.com. Is there a way to prevent this default behaviour?
If the user clicks elsewhere and THEN clicks the div, the function I need to execute will be called.
A:
One method is to make the event propagate to the parent:
$(document).click(function(e) {
// Do your stuff
e.stopPropagation();
});
http://api.jquery.com/event.stopPropagation/
A:
Just add return false;
For more info - Javascript - return false on onclick
A:
To prevent the default behavior you can return false in the on-click handler. This is a native event handler and has access to the event object (and any other variables it may need), so you can get any information you need from the element from the event object.
$('.map a').click(function(event){
event.preventDefault();
//do something else;
})
To stop the click event from bubbling up, set the click-event on the child to be handled by its parent.
$('.map a').click(function(event){
event.stopPropagation();
//do something else;
})
Note, the stopPropagation is part of the W3C DOM Level 2 Events and is only supported by IE11 and not by the other browser versions.
Also, it's worth noting that return false; is the same as calling event.preventDefault(); and event.stopPropagation() in order to handle a click.
$('.map a').click(function(event){
console.log("in listener");
event.preventDefault();
//do something else;
})
Alternatively, if you wish to stop the event bubbling to the parent you can do something like this (and here's a really interesting article on this method).
Stop
$('.map a').click(function(event){
event.stopPropagation();
//do something else;
})
Stop
$('.map a').click(function(event){
if(event.target.getAttribute('href') == "http://www.bing.com"){
$('.stop').show();
event.stopPropagation();
//do something else;
}
})
Stop
It seems this method relies on something called event bubbling, so if someone clicks out of the element, it still gets to the handler; I think this is because you are setting the event.target. You can read more about it here and here
A:
You could also solve the problem with only css, using pointer-events: none;
.map {
position:absolute;
z-index:99;
}
.map a {
pointer-events:none;
position:relative;
}
This way the click event will not be triggered on .map if the cursor is over the link a. If you want to be able to click on a while hovering the link, just add a normal click handler on the parent container of .map.
