Javascript 在 mouseevent 中更改 DOM答案

【问题标题】：JavasScript changing DOM in mouse-eventJavascript 在 mouseevent 中更改 DOM
【发布时间】：2013-12-21 04:54:49
【问题描述】：

我有 2 个 DIV，每个 DIV 中都有一个 Button，它可以在点击时执行某些操作。

现在我添加了一段代码，以便在 DIV 按下鼠标时将它们置于最前面。效果很好。问题是，他们吞下了内部按钮的mousedown...内部按钮只能通过双击来单击。

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

我该如何解决这个问题？我这样做是因为我不想每次单击 div 时都将 CSS 属性的 z-index 增加到某个幻数。我读到 jquery 也做了 DOM 操作技巧。

问题似乎是因为我在按钮的单击事件之前更改了 DOM。如果我在 mousedown 中什么都不做，一切正常。

【问题讨论】：

【解决方案1】：

只需检查 DIV 是否确实是事件的目标：

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

【讨论】：

感谢您的解决方案。实际上，我的问题要复杂一些。我的 DIV 充满了不同的元素，例如按钮下的表格。所以我几乎没有在 event.target 中得到“真正的”Top-DIV...抱歉我的问题过于简单了！
@NoRyb - 所以只要把它改成合适的？更新为仅过滤掉按钮
我需要一个更通用的方法。面板是动态加载的，可以包含任何东西（它们就像小部件）。我只想在单击这些小部件时（在其“窗口”中的任何位置）将它们放在前面，但不干扰内部的任何单击/鼠标事件。