Question

我在这里使用js / jquery有一些麻烦：

我有父LI，里面有几个不同的子元素。现在每个子元素都有一个自己附加的事件处理程序。我现在需要的是如果它错过某个类就调用父项的事件，如果父类具有该类，则调用（clicked）子事件：

<div id="parent" class="expanded">
  <span class="child1"></span>
  <div class="child2"></div>
  <font class="child3"></font>
</div>

现在我只想在父容器错过“展开”类时执行每个子事件。如果父“被扩展”，我需要允许执行的函数。

现在确定在子元素的每个处理程序中要求该类很容易，但我认为只有一个处理程序可以使用一个更好的解决方案来决定和冒泡/ stopBubble事件。你知道任何好的解决方案吗？

找到解决方案：

很容易说，关键是捕捉。由于jQuery不支持捕获（冒泡其他方向：从父级到子级），我可以使用此解决方法：

现在可以将其添加到我的代码的开头：

$('#parent').get(0).addEventListener('click', function(e) {
        if(!$(this).closest('li').hasClass('expanded')) {
            e.stopPropagation();
            e.preventDefault();
            e.stopImmediatePropagation();
            return getTicket(e, $(this)).toggleVisibility();
        }
    }, true);

Answer 1

$(".child").click(function(){
    if($(this).parent().hasClass("expanded"))
    {
       //do parent stuff with $(this).parent()
    }
    else
    {
       //do child stuff with $(this)
    }
});

Answer 2

如果您已经定义了单独的子事件处理程序;
您可以创建一个通用子事件处理程序并抛出一个用户异常（当其父级不是展开时）以防止进一步的子级 - 特定事件

$(".child").on("click", function (e) {
    //If parent does not have class expanded
    if (!$(this).parent().hasClass("expanded")) 
        throw {}
});


/* Child handlers already defined */

$("span.child").on("click", function (e) {
    console.log('span');

});
$("div.child").on("click", function (e) {
    console.log('div');
});

/**/

http://jsfiddle.net/Ujjx8/2/

Answer 3

或者你可以使用.parent（）。not（）api来实现你的目标;如下所示：

$(".child").parent().not(".expanded").click(function(){
      // code to  parent which is not having class expanded should go here.
}

jQuery - 根据父类处理子级单击

找到解决方案：

3 个答案: