I would like to be able to detect click events on the leaf node in a hierarchy.
The HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span about="1">1
<span about="2">2
<span about="3">3</span>
<span about="4">4</span>
</span>
</span>
</body>
</html>
I use the following javascript:
$( "span" ).click(function(e) {
var about = $(this).attr("about");
console.log("clicked on "+about);
});
The problem is that if I click on '4', I get the following console output:
[Log] clicked on 4
[Log] clicked on 2
[Log] clicked on 1
So the event is called on <span about="4"> but also on its parents. But I only want the event being called on <span about="4"> so that I can change the background colour of this span element.
How can I prevent the event being called on its parents?
