當一個元素被點擊時，執行一個事件嗎？

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

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

我希望這有助於

Answer 2

你可以使用event.stopPropagation（），只要它不是.live事件。現場活動不允許停止傳播，如果您需要使用現場活動，還有其他方法，請讓我知道這是否是需求。 例子：

http://jsfiddle.net/HenryGarle/y2LwH/2/

$('.lightbox-con').click(function(){ 
    $('.lightbox-con').remove(); 
}); 

$('.arrow', '.lightbox-con').click(function (e) { 
    e.stopPropagation(); 
}); 

Answer 3

該解決方案使用點擊事件http://jsfiddle.net/VKBdV/

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