'<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
元素之外的所有内容时如何关闭/删除它?我尝试了很多方法,其中之一是:
$(':not(.arrow)').click(function(){
$('.lightbox-con').remove();
});
上面的代码甚至不允许灯箱启动: - \
答案 0 :(得分:2)
此解决方案使用一次点击事件http://jsfiddle.net/VKBdV/
$('.lightbox-con').click(function(e){
var $target = $(e.target);
if($target.hasClass("arrow")) {
event.stopPropagation();
} else {
$(this).remove();
}
});
答案 1 :(得分:1)
$('.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
})
我希望这会有所帮助
答案 2 :(得分:1)
只要不是.live事件,就可以使用event.stopPropagation()。直播活动不允许停止传播,如果您需要使用直播活动还有其他方法,请告诉我这是否是一项要求。 例如:
http://jsfiddle.net/HenryGarle/y2LwH/2/
$('.lightbox-con').click(function(){
$('.lightbox-con').remove();
});
$('.arrow', '.lightbox-con').click(function (e) {
e.stopPropagation();
});