Question

我有一个多级无序列表。我正在尝试将单击处理程序附加到列表项，当它被单击时，我试图将类active添加到它，但是当单击子列表项时，单击处理程序正在对于sub和它的父级触发，我认为这是因为它在所有级别中具有相同的元素li。我怎样才能将事件仅附加到某个级别？

以下是代码示例，但请点击jsfiddle以查看其实际效果：

HTML MARKUP

<ul>
  <li>test</li>
  <li>test
    <ul>
      <li>test</li>
      <li>test
    <ul></li>
  <li>test</li>
  <li>test</li>
</li>
<li>test</li>
<li>test</li>
</ul>

JAVASCRIPT

$("li").click(multiLevelClickHandler);
function multiLevelClickHandler(event)
{
    event.preventDefault();
    var $this = $(this);
    console.log($this);
    var $actives = $this.siblings().find(".active");

    if($actives.length > 0){
        $actives.removeClass('active');
        setTimeout(function(){
            $this.addClass('active');
        }, 250);
    } else {
        $this.addClass('active');
    }
}

这是JsFiddle：http://jsfiddle.net/zcLzA/

我尝试将点击处理程序单独附加到每个级别的列表项，但它总是附加到父级以及单击的列表项。

Answer 1

使用event.stopPropagation();：

function multiLevelClickHandler(event){
    event.stopPropagation();

这会阻止事件冒泡DOM。

http://jsfiddle.net/zcLzA/2/

参考：http://api.jquery.com/event.stoppropagation/

Answer 2

在multiLevelClickhandler（）函数的末尾使用event.stopPropagation()。

Answer 3

$（'li'）作为选择器没有限定符。在您的JsFiddle中，您使用父级来限定选择器以查找元素，然后在该父级中查找任何属于ul元素子元素的li。如果我正确理解您的要求，您打算针对该事件的特定级别的嵌套列表。

要进一步过滤，请通过提供更多限定符来调整到适当的级别这可以是一个类或元素选择器（或任何数量的精确选择所需级别的创造性方法）。

// class selector
$('ul.levelClass li');

或

// element selector
$('ul ul /* repeat for the number of levels */ li');

处理此问题的一种效率较低的方法是检查事件目标是否是元素子元素的子元素，依此类推以达到您的要求，但这样做很麻烦，假设您只想将处理程序附加到嵌套列表的特定级别

，这是不必要的

更新

要解决您的评论以及您所面临的问题，请按照其他答案（event.stopPropagation（）或event.stopImmediatePropagation（））中的建议结合我的建议来解决此问题。如果您在选择要将处理程序附加到的级别后停止冒泡，则会阻止父级接收事件

代码中的一个例子：

elemContainer.find('ul.nestedLevelClass li').on("click", SpecificLevelHandler)

var SpecificLevelHandler = function(oEvent)
{
    oEvent.stopPropagation() // stop the event from bubbling up 
    // oEvent.stopImmendiatePropagation() // stop the event from firing any other handlers at all
    var oElem = $(this);
    /* Handle the event */
}

如何仅使用jQuery获取单击的子列表项？

3 个答案: