確定Java事件中點擊的最子元素（與DataTable相關）

Question

可能是我無法解決這個問題，但是可以解釋一下：

我有一個通過默認列標題排序圖形啟用了列排序的DataTable 。 在列標題之一中，我還有一個“全選”復選框。 排序和“全選”都可以，但是當單擊“全選”復選框時，我似乎無法阻止進行排序操作。

問題似乎是DataTables排序函數在全選操作之前被調用-在捕獲階段，而不是冒泡階段（據我所知，這是正確的JS說法）。

我在不同的指南和論壇帖子之間來回轉發，但是開始懷疑它是否會起作用。 我已經將event.stopPropagation()添加到全選例程中，但是由於僅在排序例程之后才調用它，因此似乎沒什么用。 我也將event.target路由設置為有條件地僅在單擊的ID不是復選框的情況下才運行排序操作，但是總的來說，我可以告訴事件對象沒有引用原始的單擊元素（是嗎？ ）。

因此，在不編輯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();
    }
});

怎么做？ 謝謝。

編輯： Jsfiddle

Answer 1

實際上，您可以對z-index使用一些CSS技巧。 只需將內部div置於比單元格更高的z-index上即可。

th > div {
  z-index:9998;
}

這將使您的復選框（而不是SELECT ALL標簽）可以按您希望的方式運行。 如果要允許用戶也可以單擊標簽，那么（如果可以）將SELECT ALL包裝在標簽元素中，並將相同的event.stopPropogation和我的CSS技術也應用於該標簽。 像這樣：

的HTML

<th><div><input type='checkbox' id='select_all' onchange='SelectAll(event, "select_all", "include_")'><label for='select_all'>&nbsp;SELECT ALL</label></div><div>h</div></th>

的CSS

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

Javscript

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

如果您無權訪問源並且無法將SELECT ALL包裝在label元素內，則可能還有其他一些CSS技巧可以執行。 關鍵是能夠分別定位標簽文本並設置其z-index屬性。

這是帶有復選框和標簽的工作示例：

https://jsfiddle.net/mspinks/y1g450ng/1/