Question

我有一个类似于虚拟桌面的应用程序（底部水平栏中的图标）。单击图标时，将打开一个窗口（动态创建）。如果你点击另一个（或相同的）图标，另一个窗口打开10px，从最后一个窗口打开10px，并移动到顶部。

创建窗口时，下面的函数会运行向窗口添加click事件。如果单击该窗口，它将移动到顶部。

现在问题。其中一个窗口包含图像的缩略图。单击图像时，将创建一个新窗口，其中包含完整大小的图像。我希望将带有全尺寸图像的新窗口放在顶部，这不会发生，因为事件（在moveOnTop函数中）在缩略图窗口上创建新窗口后触发（因为我单击时单击该窗口）在缩略图上。）

我想解决这个问题的一种方法是，如果可以防止在点击缩略图时触发事件，但我不知道如何解决。什么可能是解决这个问题的好方法？提前谢谢！

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

在缩略图的click事件处理程序中，您可以取消其他（父）元素的事件：

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

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

请参阅：event.stopPropagation()

Answer 2

这取决于具体情况。如果两个案例都由同一个事件处理程序处理，您只需与event.target进行比较。

另一方面，如果您将另一个事件处理程序绑定到图标的click事件，并且您试图阻止在单击图标时触发窗口的click事件，您可以让事件处理程序返回false或调用event.stopPropagation()，如下所示：

$('.icon').click(function(event) { // <-- parameter 'event' is automatically passed to handlers
    // Open window with icons
    event.stopPropagation();
});

注意：据我所知，您仍然（重新）将click处理程序附加到moveOnTop函数中的所有窗口。有关解决方案，请参阅my answer to your previous question。

将窗口移动到顶部时出现问题

2 个答案: