В FancyBox2 я хочу предотвратить всплытие элемента внутри элемента.
К обоим элементам прикреплен fancybox.
Но если вы нажмете на внутренний элемент, внешний элемент также сработает.
Как могу ли я остановить всплытие событий?
HTML:
<div class="outside" data-fancybox-href="#content">OUT
<div class="inside" data-fancybox-href="#content">IN</div>
</div>
<div id="content">content</div>
CSS:
.outside {
background :yellow;
height:100px;
width:100px;
}
.inside {
background : orange;
height:50px;
margin:0 25px;
width:50px;
}
#content
{
display:none;
}
JS :
jQuery(".outside").fancybox({
beforeLoad: function () {
alert("outside");
}
});
jQuery(".inside").fancybox({
beforeLoad: function () {
alert("inside");
}
});
Вот пример: http://jsfiddle.net/zrH6g/
РЕДАКТИРОВАТЬ 1
Исправил, загрузив содержимое и нажав http://jsfiddle.net/483uM/2/
РЕДАКТИРОВАТЬ 2
Редактировать 1 было решением, но оно не работало, поскольку содержимое (элементы DOM) было скопировано, а не перемещено. FancyBox 1 копирует и вставляет элементы DOM.
FancyBox 2 Перемещает и кладет обратно (Вырезать/Вставить).
Что я сделал сейчас, так это создал новый div, щелкнул по нему и удалил его, когда fancybox закроется.
//Results Cup
jQuery('.beakerLink').click(function(event)
{
//Stop Default + Event Bubbling
event.preventDefault();
event.stopPropagation();
//Set CSS Class + DataFancyBoxHref
var fancyBoxRemoveCssClass = "NEED_TO_HIDE_THIS_AFTER_FANCYBOX_CLOSE";
var dataFancyBoxHref = jQuery(this).attr("data-fancybox-href");
//Dirty FIX : Add div to click for beaker link
//Reason : Can't prevent event bubbling of beaker
jQuery(".kalender_overview").append("<div class='" + fancyBoxRemoveCssClass + "' data-fancybox-href='" + dataFancyBoxHref + "'>REMOVE AFTER FANCYBOX CLOSES</div>");
//Init FancyBox
jQuery("." + fancyBoxRemoveCssClass).fancybox(
{
//Before Closing
beforeClose: function()
{
//Remove Created Temp Div Element (Dirty FIX)
jQuery("." + fancyBoxRemoveCssClass).remove();
}
});
//Click
jQuery("." + fancyBoxRemoveCssClass).click();
});