单击所有内容时执行一个事件,除了一个元素?

时间:2011-08-19 10:53:59

标签: javascript jquery

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

上面的代码甚至不允许灯箱启动: - \

3 个答案:

答案 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();
});