确定为Javascript事件单击的most子元素（与DataTable相关）

也许我这样做是行不通的，但要解释一下：

我通过默认的列标题排序图形启用了列排序。在其中一个列标题中，我还有一个全选复选框。排序和全选都起作用，但我似乎无法阻止在单击全选复选框时进行排序操作

问题似乎是DataTables排序函数在SelectAll操作之前被调用——在捕获阶段，而不是我理解为正确的JS说法的冒泡阶段

我一直在不同的指南和论坛帖子之间来回讨论这个问题，但我开始怀疑它是否会起作用。我已将event.stopPropagation添加到selectall例程中，但由于它仅在sort例程之后调用，因此似乎没有什么用处。我还通过event.target路径有条件地只在单击的ID不是复选框的情况下运行排序操作，但是我可以告诉您，事件对象没有引用原始的clicked元素，是吗

因此，在不编辑DataTables源代码的情况下，如果可能的话，我真的宁愿将其保留在书架上，如何让排序例程仅在单击列标题本身时运行，而不是在子元素中运行

所以我想要一些大致如下的东西：

function SelectAll(event)
{
    event.stopPropagation();  //Doesn't help

    ...
}

$("#table_id").on("order.dt", function (event, settings)
{
    if(event.not_clicked_select_all)
    {
        table_id.order();
    }
});

如何做到这一点？谢谢

编辑：

---

实际上，您可以对z索引使用一些css技巧。只需将内部div放在比单元格高的z索引上

th > div {
  z-index:9998;
}

这将允许您的复选框而不是全选标签按您希望的方式运行。如果您希望允许用户也能够单击标签，那么如果您能够将“全选”元素包装在标签元素中，并将相同的event.stopPropogation和my css技术应用于该标签。像这样：

HTML

沙文

$("#select_all").click(function(event){event.stopPropagation()});
$("label[for='select_all']").click(function(event){event.stopPropagation()});

如果您没有访问源代码的权限，并且无法将selectall包装到label元素中，那么您可能还可以使用其他css技巧。关键是能够单独针对标签文本并设置其z索引属性

这是一个带有复选框和标签的工作示例：

---

如果使用得当，stopPropagation应能正常工作。提供一个简单的例子，数据表的包含并不能让一个真正的例子变得那么容易，但我会尝试一下。但我可以告诉你的是，on order.dt函数中的断点总是在SelectAll中的断点之前命中，此时排序已经发生，所以我不确定stopPropogation在这方面会有什么帮助。Datatables在许多不同的cdn上都可用，所以在任何沙箱站点（如JSFIDLE、plunker、codepen）上都可以很容易地为它添加资源etc@charlietfl对不起，以前的链接错误。匆忙地把它们放在一起，也许不是非常整洁，但是：。请尝试在不排序的情况下单击“全选”。尝试添加$“全选”。单击函数evt{evt.stopPropagation}

th > div {
  z-index:9998;
}
th > div > label {
  z-index:9999;
}

$("#select_all").click(function(event){event.stopPropagation()});
$("label[for='select_all']").click(function(event){event.stopPropagation()});