如何有选择地禁用jquery'；什么是触发器？

我有下面的谜题，我猜答案对一些人来说是显而易见的

想法是这样的：有一个文章列表。每篇文章最初只有摘录显示。点击文章中的任何地方都会隐藏摘录，并显示完整的故事和照片。再次单击该文章（或其他文章）将关闭该打开的文章，并重新显示摘录

问题是，我还使用fancybox来放大图像。当我点击图像缩略图时，我得到了同样关闭文章的不希望的效果

如何禁用jquery“on（）”调用来单击图像，同时保持fancybox触发不变

p、 不确定下面的代码是否有效，这是对一些确实有效的东西的简化

HTML

<article>
    <h1>Article One</h1>
    <div class="first">
        Article excerpt
    </div>
    <div class="second" style="display:none">
        <a href="#" class="fancybox"><img src="blah.jpg"></a>
        Article in full
    </div>
</article>

<article>
    <h1>Article Two</h1>
    <div class="first">
        Article excerpt
    </div>
    <div class="second" style="display:none">
        <a href="#" class="fancybox"><img src="blah.jpg"></a>
        Article in full
    </div>
</article>

全文
全文

JAVASCRIPT

<script>
$(function(){

    $('article').on('click',function(){
        $('div').hide();
        $('div.excerpt').show();
        $(this).hide();
        $(this).closest('div').fadeIn();
    });

    $('.fancybox').fancybox();
});
</script>

$（函数（）{
$（'article'）。在（'click'，function（）上{
$（'div'）.hide（）；
$（'div.extract'）.show（）；
$（this.hide（）；
$（this.closest（'div'）.fadeIn（）；
});
$（'.fancybox'）.fancybox（）；
});

下图显示了这两种状态。。。单击前后

---

通过

event.target

检查单击的元素（或其子元素）是否具有

fancybox

类

$('article').on('click', function(e) {
    var $target = $(e.target);
    if ($target.hasClass('fancybox') || $target.children().hasClass('fancybox')) return;
    $('div').hide();
    $('div.excerpt').show();
    $(this).hide();
    $(this).closest('div').fadeIn();
});

---

通过

event.target

检查单击的元素（或其子元素）是否具有

fancybox

类

$('article').on('click', function(e) {
    var $target = $(e.target);
    if ($target.hasClass('fancybox') || $target.children().hasClass('fancybox')) return;
    $('div').hide();
    $('div.excerpt').show();
    $(this).hide();
    $(this).closest('div').fadeIn();
});

---

这可能会起作用，但可能会禁用fancybox：

$('article a.fancybox').on('click',function(e){
    e.stopPropagation();
});

如果上述方法无效，请尝试以下方法：

$('article').on('click',function(e){
    if (!$(e.target).is('a.fancybox')) {
        $('div').hide();
        $('div.excerpt').show();
        $(this).hide();
        $(this).closest('div').fadeIn();
    }
});

这里有一个例子-

但您的代码不起作用，因此我将其更改为：

$('article').on('click',function(){
    $('div.first, div.second').toggle();
    var otherArticles = $('article').not(this);
    otherArticles.find('div.second').hide();
    otherArticles.find('div.first').show();
});

---

这可能会起作用，但可能会禁用fancybox：

$('article a.fancybox').on('click',function(e){
    e.stopPropagation();
});

如果上述方法无效，请尝试以下方法：

$('article').on('click',function(e){
    if (!$(e.target).is('a.fancybox')) {
        $('div').hide();
        $('div.excerpt').show();
        $(this).hide();
        $(this).closest('div').fadeIn();
    }
});

这里有一个例子-

但您的代码不起作用，因此我将其更改为：

$('article').on('click',function(){
    $('div.first, div.second').toggle();
    var otherArticles = $('article').not(this);
    otherArticles.find('div.second').hide();
    otherArticles.find('div.first').show();
});

---

您可以在fancybox插件上使用stopPropagation，以防止它冒泡到文章。但是你也可以看看你自己的方法，看看是谁触发了它

<script>
$(function(){
    $('article').on('click',function(e){
        if(e.target === this) {
            $('div').hide();
            $('div.excerpt').show();
            $(this).hide();
            $(this).closest('div').fadeIn();
        }
    });
    $('.fancybox').fancybox();
});
</script>

$（函数（）{
$（'article'）。关于（'click'，函数（e）{
如果（例如，目标===此）{
$（'div'）.hide（）；
$（'div.extract'）.show（）；
$（this.hide（）；
$（this.closest（'div'）.fadeIn（）；
}
});
$（'.fancybox'）.fancybox（）；
});

---

这里的问题是，如果你的文章中有任何元素，如果你想让它触发“关闭”事件，你需要将其添加到OK条件，否则你只需查看e.target是否有fancybox的claass，如果没有，则触发动画。

你可以在fancybox插件上使用stopPropagation，以防止它冒泡到文章。但是你也可以看看你自己的方法，看看是谁触发了它

<script>
$(function(){
    $('article').on('click',function(e){
        if(e.target === this) {
            $('div').hide();
            $('div.excerpt').show();
            $(this).hide();
            $(this).closest('div').fadeIn();
        }
    });
    $('.fancybox').fancybox();
});
</script>

$（函数（）{
$（'article'）。关于（'click'，函数（e）{
如果（例如，目标===此）{
$（'div'）.hide（）；
$（'div.extract'）.show（）；
$（this.hide（）；
$（this.closest（'div'）.fadeIn（）；
}
});
$（'.fancybox'）.fancybox（）；
});

---

这里的问题是，如果你的文章中有任何元素，如果你想让它触发“关闭”事件，你需要将其添加到OK条件中，否则你只需查看e.target是否有fancybox类，如果没有，则触发动画。

谢谢你为我指明了正确的方向！我最终使用了

if（e.target.nodeName！='IMG'）

。。。斯塔克万岁！谢谢你给我指明了正确的方向！我最终使用了

if（e.target.nodeName！='IMG'）

。。。斯塔克万岁！