首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >根据父类的不同,jQuery -句柄子单击

根据父类的不同,jQuery -句柄子单击
EN

Stack Overflow用户
提问于 2014-05-12 08:12:25
回答 3查看 4.2K关注 0票数 2

我在这里使用js/jquery遇到了一些困难:

我有几个不同子元素的父级LIs。现在,每个子元素都有自己的附加事件处理程序。现在我需要的是调用父类的事件(如果它缺少某个类),如果父类有该类,则调用(单击的)子事件:

代码语言:javascript
代码运行次数:0
运行
复制
<div id="parent" class="expanded">
  <span class="child1"></span>
  <div class="child2"></div>
  <font class="child3"></font>
</div>

现在,如果父容器缺少类“展开”,我只想执行每个子事件。如果父函数是“展开的”,我需要允许执行的函数。

现在,在子元素上的每个处理程序中都可以很容易地请求这个类,但是我认为只使用一个处理程序就可以更好地解决这个问题,它决定并阻止事件的发生。你知道什么好的解决办法吗?

找到解决办法:

很容易说,关键是捕捉。由于jQuery不支持捕获(冒泡的另一个方向:从父到子),所以我可以使用这个解决方法

现在,它可以将以下内容添加到代码的开头:

代码语言:javascript
代码运行次数:0
运行
复制
$('#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);
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2014-05-12 08:21:27

代码语言:javascript
代码运行次数:0
运行
复制
$(".child").click(function(){
    if($(this).parent().hasClass("expanded"))
    {
       //do parent stuff with $(this).parent()
    }
    else
    {
       //do child stuff with $(this)
    }
});
票数 4
EN

Stack Overflow用户

发布于 2014-05-12 08:41:45

如果已经定义了单独的子事件处理程序;

您可以创建一个通用子事件处理程序,并抛出用户异常(当其父事件未展开时),以防止进一步的子特定事件。

代码语言:javascript
代码运行次数:0
运行
复制
$(".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/

票数 1
EN

Stack Overflow用户

发布于 2014-05-12 08:52:45

或者,您可以使用.parent().not() api来实现您的目标;如下所示:

代码语言:javascript
代码运行次数:0
运行
复制
$(".child").parent().not(".expanded").click(function(){
      // code to  parent which is not having class expanded should go here.
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23603992

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档