Bestimmen Kind-Element am meisten auf für Javascript-Ereignis angeklickt (Datatable bezogen)

Question

Es könnte die Art und Weise das sein, dass ich näher bin einfach nicht funktionieren, aber zu erklären:

Ich habe ein DataTable mit Spaltensortierung aktiviert über die Standard-Spaltenüberschrift Sortiergrafik. In einem der Spaltenüberschriften habe ich auch ein "Alle auswählen" Kontrollkästchen. Die Sortierung und die "Alles auswählen" funktionieren beide, aber ich kann nicht verhindern, dass der Sortiervorgang stattfindet, wenn ich das Kontrollkästchen Alles auswählen anklicke.

Das Problem scheint zu sein, dass die DataTables-Sortierfunktion vor der Select-All-Operation aufgerufen wird - in der Erfassung statt in der Sprudel- Up-Phase in dem, was ich verstehe, der richtige JS-Sprachgebrauch zu sein.

Ich habe zwischen verschiedenen Leitfäden und Forumsbeiträgen hin- und hergeschickt, aber ich frage mich, ob es funktionieren wird. Ich habe event.stopPropagation() zur Auswahl aller Routine hinzugefügt, aber weil dies nur nach der Sortierroutine aufgerufen wird, scheint es von wenig Nutzen zu sein. Ich bin auch die event.target Route hinuntergegangen, um die Sortieroperation bedingt auszuführen nur zu lassen, wenn die geklickte ID nicht die Checkbox war, aber für alles kann ich sagen, dass das Ereignisobjekt keinen Bezug auf das ursprüngliche geklickte Element hält (tut es?).

Also, ohne Bearbeitung der DataTables-Quelle (ich würde wirklich lieber so von der Stange, wenn überhaupt möglich), wie habe ich die Sortierroutine nur ausgeführt, wenn der Spaltenkopf selbst angeklickt ist, im Gegensatz zu einem Kind Element?

Deshalb möchte ich etwas entlang der Linien von:

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(); 
    } 
}); 

Wie dies geschehen könnte? Vielen Dank.

Edit: Jsfiddle

Answer 1

Sie können tatsächlich ein wenig CSS-Tricks mit dem z-index verwenden. Setzen Sie Ihr inneres div auf eine z-index, die höher als die Zelle ist.

th > div { 
    z-index:9998; 
} 

Das Ihre Checkbox erlauben (nicht die SELECT ALL Label) so, wie Sie es wollen funktionieren. Wenn Sie zulassen möchten, dass Benutzer auch auf das Etikett klicken können, dann (wenn Sie dazu in der Lage sind) das SELECT ALL in ein Etikettenelement einlegen und dasselbe event.stopPropogation und meine CSS-Technik auf dieses Etikett anwenden. Wie folgt aus:

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()}); 

Wenn Sie keinen Zugriff auf die Quelle und kann nicht wickeln wählen Sie alle innen ein Label-Element, gibt es wahrscheinlich einen anderen CSS-Trick, den Sie tun können. Der Schlüssel besteht darin, in der Lage zu sein, den Etikettentext individuell auszurichten und seine Eigenschaft z-index festzulegen.

Hier ist ein funktionstüchtiges Beispiel sowohl mit der Checkbox und das Etikett:

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