如何选择性地禁用jquery的on()触发器？
如何选择性地禁用jquery的on()触发器？
提问于 2012-01-20 09:24:46
我有下面的谜题，我猜这个解决方案对一些人来说是很明显的。
这个想法是这样的:有一份文章清单。每一篇文章最初只显示节选。点击文章中的任何地方都可以隐藏摘录，并显示完整的故事和照片。再次单击文章(或另一篇文章)将关闭打开的文章，并重新显示摘录。
麻烦的是，我也在用fancybox放大图像。当我点击图片缩略图，我得到了不希望的效果，也关闭了文章。
如何禁用jquery "on()“对图像单击的调用，同时保持fancybox完好无损地触发？
附注：不确定下面的代码是否有效，这是对一些确实有效的代码的简化.
<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>下图显示了这两种状态..。点击前后。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-01-20 09:33:30
这可能有效，尽管它可能禁用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();
}
});下面是一个例子- http://jsfiddle.net/Ey5TU/1/
但是，您的代码没有工作，所以我将其更改为：
$('article').on('click',function(){
$('div.first, div.second').toggle();
var otherArticles = $('article').not(this);
otherArticles.find('div.second').hide();
otherArticles.find('div.first').show();
});Stack Overflow用户
发布于 2012-01-20 09:28:03
通过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();
});Stack Overflow用户
发布于 2012-01-20 09:36:54
您可以使用stopPropagation上的fancybox插件，以防止它冒泡到文章。但是你也可以看看你自己的方法，看看是谁触发了它。
<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>这里的问题是，如果文章中有任何元素，并且希望它触发“关闭”事件，则需要将其添加到OK条件中，否则只需查看e.target是否有fancybox的子句，如果没有，则触发动画。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8939154
复制相关文章
相似问题
腾讯云开发者
