当一个元素被点击时，执行一个事件吗？

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

上面的代码甚至不会让灯箱推出： - \

来源

2011-08-19 jilseego

您的功能额外'j'。 –

$（）和$ j（）？为什么？你使用jQuery.noConflict（）？ – chchrist

@christrist，是的，但我已经更新了代码，以求清晰。 :-) – jilseego

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

我希望这有助于

来源

2011-08-19 11:00:27

谢谢，正是我需要的:-) – jilseego

你可以使用event.stopPropagation（），只要它不是.live事件。现场活动不允许停止传播，如果您需要使用现场活动，还有其他方法，请让我知道这是否是需求。例子：

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

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

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

来源

2011-08-19 11:01:31 Henry

该解决方案使用点击事件http://jsfiddle.net/VKBdV/

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

来源

2011-08-19 11:09:46 chchrist

当一个元素被点击时，执行一个事件吗？

回答

相关问题