Определить ребенок наиболее элемент щелкнули для Javascript события (DataTable связанного)

Question

Может быть, как я подхожу это просто не будет работать, но объяснить:

У меня есть DataTable с поддержкой сортировки столбца через сортировку по столбцу заголовка столбца по умолчанию. В одном из заголовков столбцов у меня также есть флажок «Выбрать все». Сортировка и «выберите все» работают, но я не могу помешать выполнению операции сортировки при нажатии на флажок «Выбрать все».

Проблема заключается в том, что функция сортировки DataTables вызывается перед выбором всей операции - на этапе захвата, а не на пузырьковой фазе, в том, что я понимаю как правильный JS-язык.

Я вернулся и переехал с этим между различными руководствами и сообщениями на форуме, но я начинаю задаваться вопросом, будет ли это работать. Я добавил event.stopPropagation() для выбора всей процедуры, но поскольку это вызвано только после процедуры сортировки, она кажется малоиспользуемой. Я также пошел по маршруту event.target, чтобы условно только запустить операцию сортировки, если идентификатор с кликом не был флажком, но для всего, что я могу сказать, объект события не содержит ссылки на исходный элемент, который нажал (это?).

Итак, не редактируя источник 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(); 
    } 
}); 

Как это может быть сделано? Благодарю.

Edit: Jsfiddle

Answer 1

Вы можете использовать немного CSS фокусы с z-index. Просто поместите свой внутренний 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 внутри элемент метки, возможно, есть и другой трюк css, который вы можете сделать. Ключ должен быть нацелен на текст ярлыка индивидуально и установить его свойство z-index.

Вот рабочий пример как с флажком И этикетке:

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