javascript - 单击除一个元素之外的所有内容时执行事件？

Question

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

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

Answer 1

此解决方案使用一键事件 http://jsfiddle.net/VKBdV/

$('.lightbox-con').click(function(e){
  var $target = $(e.target);
    if($target.hasClass("arrow")) {
        event.stopPropagation();
    } else {
         $(this).remove(); 
    }
});