Question

我有以下代码可以正常工作：

$(document).on('click','.with-hidden-caption', function(){
    if (window.matchMedia("(min-width: "+colum+")").matches || !$(this).parents(".my-wrapper").length) {
        $(this).toggleClass('show-caption')
        $(this).find('figcaption').slideToggle("fast");
    }
});

现在我想找出.with-hidden-caption'在依赖点击的地方点击toggleClass的位置。换句话说：如果单击是在newToolBar上，则表示不会运行。

这是我的HTML：

    <figure class="with-hidden-caption">
<figcaption>Hello    
   <div class="newToolBar"> if here is clicked do something else but not $(this).toggleClass('show-caption') </div>
          </figcaption>
                            </figure>

我如何得到它。

Answer 1

您可以使用

获取当前单击元素的类名称

$(document).on('click','.with-hidden-caption', function(e){
   var clsName = e.target.className;
   if(clsName == 'newToolBar')
   {
     return false;
   }
   else
   {
     if (window.matchMedia("(min-width: "+colum+")").matches || !$(this).parents(".my-wrapper").length) {
        $(this).toggleClass('show-caption')
        $(this).find('figcaption').slideToggle("fast");
   }
}
});

这就是你需要的......？

Answer 2

试试这个：

$(document).on('click','.with-hidden-caption', function(){
    if ($(e.target).hasClass('newToolBar')) return;
    if (window.matchMedia("(min-width: "+colum+")").matches || !$(this).parents(".my-wrapper").length) {
        $(this).toggleClass('show-caption')
        $(this).find('figcaption').slideToggle("fast");
    }
});

我们将检查当前点击的元素e.target是否具有类newToolBar，然后执行该功能。

Answer 3

尝试

$(document).on('click','.with-hidden-caption', function(){
    if($(e.target).closest('.newToolBar').length) return
    if (window.matchMedia("(min-width: "+colum+")").matches || !$(this).parents(".my-wrapper").length) {
        $(this).toggleClass('show-caption')
        $(this).find('figcaption').slideToggle("fast");
    }
});

过滤单击文档中的事件

3 个答案: