jquery - 如何将 'dblclick' 附加到元素而不是其后代？

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 上 .tools、.sublist，我不希望发生这种情况，或.name。

基本代码:

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

我以为我的 :not(*) 会告诉它不要将其附加到 child 身上，但它不起作用。我的 .first_level 有一个最小高度，所以我最初的想法还让我检查元素内单击事件的坐标，以及它是否在要切换的最小高度内。这解决了它在子列表中抓取的问题，但我的工具和名称仍然是一个问题(不是最好的解决方案，但它很简洁)。那么我在这里忘记使用什么选择器？

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/