Question

我有一个带有嵌入式列表的基本列表项，当我双击li中不是嵌入式ul的任何地方时，我想打开它。

<ul>
    <li class="first_level">
        <span class="name">List Name</span>
        <ul class="tools"></ul>
        <ul class="sublist">
            <li>Subitem 1</li>
            <li>Subitem 2</li>
            <li>Subitem 3</li>
        </ul>
    </li>
</ul>

在上面的示例中，我希望将.first_level中的任何位置附加到dblclick以将.sublist切换为可见且不可见但我不希望这发生在我dblclick on .tools，.sublist ，或.name。

基本代码：

$('.first_level, .first_level :not(*)').dblclick(function(e){
    $(this).find('.sublist').toggle();
});

我认为我的：不是（*）会告诉它不要把它附在孩子身上但它没有用。我的.first_level有一个最小高度所以我最初的想法也让我检查元素中click事件的坐标，以及它是否在切换的最小高度内。这解决了它在子列表中抓取的问题，但我的工具和名称仍然是一个问题（不是最好的解决方案，但它是succint）。那么我忘了在这里使用什么选择器呢？

http://jsfiddle.net/8PNEn/1/

Answer 1

确保在.first_level

上完成双击

$('.first_level').dblclick(function(e) {
    if ($(e.target).hasClass('first_level')) {
        $(this).find('.sublist').toggle();
    }
});

http://jsfiddle.net/8PNEn/9/

Answer 2

您可能需要在处理程序中执行一些逻辑操作，而不是依赖于选择器。也许是这样，使用closest和is：

$('.first_level').dblclick(function(e) {
    if ($(e.target).closest('li').is(this)) {
        $(this).find('.sublist').toggle();
    }
});

这从事件目标（双击的元素）开始，然后向上遍历树以查找最近的li元素，然后查看该li元素是否是元素所在的元素处理该函数，即.first_level。如果是，则切换子列表。

jsfiddle

Answer 3

您是否尝试取消名称工具和子列表dom的事件传播？它看起来像这样：

// attach double click to first level dom
$('.first_level').dblclick(function(e){
    $(this).find('.sublist').toggle();
});

// cancel even propagation for name, tools, and sublist dom
$('.name, .tools, .sublist').dblclick(function(e){
  e.stopPropagation();
});

http://jsfiddle.net/DbuQ5/

Answer 4

这是一个很好的方法：http://jsfiddle.net/DavidLaberge/8PNEn/6/

Answer 5

因为我的实时代码实际上没有.first_level类，所以我最终在接受的答案和当前拥有最多票数的答案之间使用混合解决方案。我决定将我的解决方案作为答案发布，而不是编辑我的问题只是为了与网站的功能保持一致：）

$('ul > li').dblclick(function(e) {
    if (e.target == this) {
        $(this).find('.sublist').toggle();
    }
});

如何将'dblclick'附加到元素而不是它的后代？

5 个答案: