Question

I have an application that works like a virtual desktop (icons in a horizontal bar in the bottom). When you click on an icon, a window opens (dynamically created). If you click on another (or the same) icon another window opens 10px down and 10px to the right from the last one, and is moved on the top.

When a window gets created, the function below runs adding a click event to the window. If the window is clicked it gets moved to the top.

Now to the problem. One of the windows contains thumbnails of images. When clicking on an image a new window gets created with the image in full size. I want the new window with the full size image to be placed on top, which doesn’t happen because the event (in the moveOnTop function) fires after the new window is created on the thumbnail window (because I clicked that window when I clicked on a thumbnail).

I guess one way to solve this would be if it was possible to prevent the event to be fired if a thumbnail is clicked, though I don’t know how. What could otherwise be a good way to solve this? Thanks in advance!

Windows.prototype.moveOnTop = function(){
var container = '#desktop';

    $(container).on('click', '.window', function() {
        var thisWindow = $(this);
        if(thisWindow.next().length > 0){
            thisWindow.appendTo('#desktop');
        }
    });
};

Answer 1

Inside the click event handler for thumbnails you can cancel the the event for other (parent) elements:

$("img.thumbnail").on("click", function(e) {
    ...

    // Finally, prevent the click event from bubbling up to parent elements
    e.stopPropagation();
});

See: event.stopPropagation()