jquery - 过滤文档中的点击事件

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' 中单击的位置以切换类取决于单击的位置。换句话说：如果点击是在 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(){
    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 2

您可以使用获取当前单击元素的类名称

$(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 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");
    }
});