Make onclick handler ignore link clicks
I have my own onclick handler for a block element (configured with jQuery.click () method). This block element can contain links.
I'm sure this is possible, so how can I return the handler if it was a link that I clicked on (so that the link is visited without running my code)?
Check the event object to see if the target is an anchor tag and will return true:
$("div").click(function(eventObject){
if($(eventObject.target).is("a"))
return true;
//run your code
});
inside your click event, you can check what the tag is:
$("#myDiv").click(function(e) {
if (e.target.tagName.toLowerCase() == "a") {
return true; //link clicked
} else {
//run your usual div click code here...
}
});
how about testing if an element is an anchor or not inside a click function?
if(this.tagName() == "a")return true;
I have not tested it, check and answer
Validation nodeName
event.target
does not work if your links have children (for example, <span>
or <img>
).
Instead, try picking up the tree from event.target
(deepest element) to event.currentTarget
(event the event handler was registered for) and check if any of these elements are available:
$("div").click(function(event) {
if (clickableBetweenTargetAndCurrentTarget(event))
return; // This click was probably already handled.
doSomething();
});
function clickableBetweenTargetAndCurrentTarget(event) {
for (var el = event.target; el && el != event.currentTarget; el = el.parentNode) {
if (isClickable(el))
return true;
}
return false;
}
function isClickable(el) {
// TODO: Customize this as appropriate for your webpage.
return el.nodeName == 'A' || el.nodeName == 'BUTTON';
}
Demo: http://jsbin.com/fojaco/2/
Note that you will need to configure isClickable for your specific webpage; it's hard / impossible to indicate if an element is generally available.
An alternative approach would be to make sure all clickable descendants are called event.preventDefault()
, then your div click listener should only check event.defaultPrevented
(IE9 +). Or descendants could be named event.stopPropagation()
as suggested in another answer , but calling stopPropagation could lead to subtle bugs .