确定Java事件中点击的最子元素(与DataTable相关) [英] Determine child-most element clicked on for Javascript event (DataTable related)

问题描述

可能我无法解决这个问题，但请解释一下:

我有一个 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

解决方案

您实际上可以在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;
}

脚本

$("#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/

It might be that the way I'm approaching this just won't work, but to explain:

I have a DataTable with column sorting enabled via the default column header sorting graphic. In one of the column headers I also have a "select all" checkbox. The sorting and the "select all" both work, but I can't seem to prevent the sort operation from taking place when clicking on the select all checkbox.

The problem seems to be that the DataTables sort function is called ahead of the select all operation - in the capturing rather than bubbling up phase in what I understand to be the correct JS parlance.

I've been back and forward with this between different guides and forum posts, but am starting to wonder if it's going to work. I've added event.stopPropagation() to the select all routine, but because this is only called after the sort routine it seems of little use. I've also gone down the event.target route to conditionally only have the sort operation run if the clicked ID wasn't the checkbox, but for all I can tell the event object holds no reference to the original clicked element (does it?).

So, without editing the DataTables source (I'd really rather keep that off the shelf if at all possible), how do I have the sort routine run only when the column header itself is clicked, as opposed to a child element?

So I want something along the lines of:

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

How might this be done? Thanks.

Edit: Jsfiddle

解决方案

You can actually use a little css trickery with the z-index. Just put your inner div on a z-index that is higher than the cell.

th > div {
  z-index:9998;
}

That will allow your checkbox (not the SELECT ALL label) to function the way you want it to. If you want to allow users to be able to click on the label too, then (if you are able) wrap the SELECT ALL in a label element and apply the same event.stopPropogation and my css technique to that label as well. Like this:

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

If you don't have access to the source and cannot wrap SELECT ALL inside a label element, there is probably some other css trick you can do. The key is to be able to target the label text individually and set it's z-index property.

Here is a working sample with both the checkbox AND the label:

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

这篇关于确定Java事件中点击的最子元素(与DataTable相关)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！