I have a menu built this way:
ul
li
a
li
a
li
a
The problem I am having is this: When a user clicks li a the li-function fires as well. The li -function should only fire if someone clicks just the li (misses on the a-tag).
$('#stromSkjemaTabs li').children().mousedown(function () {
$('#console').append('debug1 <br />');
});
$('#stromSkjemaTabs li').mousedown.(function () {
$('#console').append('debug2 <br />');
});
Is there any way of writing this so only one of the functions fires? When clicking the li a the function containing "debug1" should fire (NOT debug2 too). When clicking li the debug2 should fire.
I've tried every combination of children() but I can't get this to work.
Any cleaver heads out there?
Change this..
ReplyDelete$('#stromSkjemaTabs li').children().mousedown(function () {
$('#console').append('debug1 <br />');
});
to this-
$('#stromSkjemaTabs > li > a').mousedown(function (e) {
e.stopPropagation();
$('#console').append('debug1 <br />');
});
uper one will fire mousedown event on all the children of li, whether it is a or not.
The stopPropagation() function
ReplyDeletePrevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
Here's an example in your case: http://jsfiddle.net/DRnBN/42/
$(document).ready(function () {
$('li').mousedown(function () {
$('#console').append('debug1 <br />');
});
$('li').children().mousedown(function (event) {
event.stopPropagation();
$('#console').append('debug2 <br />');
});
});