[英]Execute an event when everything is clicked except one element?
'<div class="lightbox-con">
<div class="lightbox-shade"></div>
<span class="logo"></span>
<div class="controls">
<span class="arrow back"></span><span class="close"></span><span class="arrow forward"></span>
</div>
<div class="caption">
<p class="caption-text"></p>
<span class="logo2" ></span>
</div>
</div>'
上面的标记是一个灯箱。 鉴于它已经处于过度状态,当单击除.arrow
元素以外的.arrow
内容时,如何关闭/删除它? 我尝试了很多方法,其中之一是:
$(':not(.arrow)').click(function(){
$('.lightbox-con').remove();
});
上面的代码甚至不允许灯箱启动:-\\
此解决方案使用一键式事件http://jsfiddle.net/VKBdV/
$('.lightbox-con').click(function(e){
var $target = $(e.target);
if($target.hasClass("arrow")) {
event.stopPropagation();
} else {
$(this).remove();
}
});
$('.lightbox-con').click(function(){
//your code to close it
});
$('.arrow').click(function(event){
//your code for moving forward back
event.stopPropagation(); //this will do the trick, it wil just execute arrow code and stop others
})
我希望这有帮助
您可以使用event.stopPropagation(),只要它不是.live事件即可。 实时事件不允许停止传播,如果您需要使用实时事件,则还有其他方法可以解决,请告诉我这是否是必需的。 例:
http://jsfiddle.net/HenryGarle/y2LwH/2/
$('.lightbox-con').click(function(){
$('.lightbox-con').remove();
});
$('.arrow', '.lightbox-con').click(function (e) {
e.stopPropagation();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.