JavasScript changing DOM in mouse-event

Question

I have 2 DIVs and in each DIV there's a Button which does something on click.

Now I've added a piece of code to bring the DIVs to front when they get a mousedown. Which works very well. The problem is, that they swallow the mousedown of the inner button... The inner button can only be clicked by double clicking it.

http://jsfiddle.net/nUtz6/

$('div').mousedown(function (event) {
    $(this).parent().append($(this));
});

how could I solve this problem? I did it this way because I don't want to increment the z-index of the CSS property to some magic number everytime I click the div. I read that jquery also does the DOM manipulation trick.

The problem seems to occur because I change the DOM right before the click-Event of the button. If I don't do anything in the mousedown, everything works fine.

Answer 1

Just check that the DIV is actually the target of the event :

$('div').mousedown(function (event) {
    if (event.target.tagName.toLowerCase() != 'button')
        $(this).parent().append($(this));
});

FIDDLE