javascript 我如何全局处理fancybox的onClose事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10733373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I globally handle onClose event of fancybox?
提问by Tim Tom
I am using Fancybox in my application. Now to handle the close event we write something like:
我在我的应用程序中使用 Fancybox。现在为了处理关闭事件，我们编写如下内容：
$(".fancybox").fancybox({onClose:function(){alert('blah');}}
as seen on this doc page:
如本文档页面所示：
http://fancyapps.com/fancybox/#docs
http://fancyapps.com/fancybox/#docs
However I want to write something common and global to all fancybox that gets run everytime for any of the fancybox. How do I do that? In short I don't want to write the code of onClose on each fancybox and don't want it to be dependent upon class,id (Eg. .fancyboxin this case). How do I do that? I tried to write:
但是，我想为所有每次为任何fancybox 运行的fancybox 编写一些通用且全局的内容。我怎么做？简而言之，我不想在每个花式框上编写 onClose 的代码，也不希望它依赖于 class,id （例如，.fancybox在这种情况下）。我怎么做？我试着写：
$.fancybox({onClose:function(){alert('blah');}}
but it doesn't work and from the docs it looks like this is the function for opening progammatically.
但它不起作用，从文档看来，这是以编程方式打开的功能。
采纳答案by Antonio Laguna
I'm not sure if this is the best solution but I would go for a pub/sub pattern so, in your fancybox you should do something like that.
我不确定这是否是最好的解决方案，但我会选择发布/订阅模式，因此，在您的花式盒中，您应该做类似的事情。
$( ".fancybox" ).fancybox( {
onClose: function () {
$( window ).trigger( 'fancyboxClosed' );
}
} );
Then, somewhere in your code:
然后，在您的代码中的某处：
$( window ).on( 'fancyboxClosed', function () {
// Your global function for fancybox closed
} );
I don't know very much about your purpose but have in mind you can always pass a named function instead of an anonymous one so you always trigger the same function.
我不太了解您的目的，但请记住，您始终可以传递命名函数而不是匿名函数，因此您始终可以触发相同的函数。
The above example should be the way to go if you want to make different things depending on each fancybox.
如果你想根据每个花式盒子制作不同的东西，上面的例子应该是要走的路。
Also, you can attach the event to whatever object you want. Just used window for convenience.
此外，您可以将事件附加到您想要的任何对象。只是为了方便起见使用了窗口。
Edit
编辑
You can also edit your fancybox source to do that (edit for 1.3.4) just add $(window).trigger('fancyboxClosed');to around line 953.
你也可以编辑你的fancybox源来做到这一点（编辑1.3.4）只需添加$(window).trigger('fancyboxClosed');到第953行左右。
回答by mola10
Try to use methods
尝试使用方法
beforeClose or afterClose
beforeClose 或 afterClose
This code work fine
这段代码工作正常
$(".fancybox").fancybox({beforeClose:function(){alert('blah');}}
回答by sv_in
From what I see, Fancybox is not providing any API for that. You can instead use a hack. The lightbox is closed when:
据我所知，Fancybox 没有为此提供任何 API。您可以改为使用 hack。灯箱在以下情况下关闭：
- close button is clicked (div with class 'fancybox-close')
- black background is clicked (div with class 'fancybox-overlay')
- escape button is pressed (e.which = 27)
- 单击关闭按钮（div 类为“fancybox-close”）
- 单击黑色背景（带有“fancybox-overlay”类的 div）
- 退出按钮被按下（e.which = 27）
So, you can add a click handler to body to check if event.target is .fancybox-close or .fancybox-overlay. Also add a keydown handler to document to listen if escape key is pressed.
因此，您可以向 body 添加一个点击处理程序来检查 event.target 是 .fancybox-close 还是 .fancybox-overlay。还要向文档添加一个 keydown 处理程序，以在按下转义键时进行侦听。
回答by opdb
Here is a decent solution for 1.3.4
这是 1.3.4 的一个不错的解决方案
$(document).delegate('#fancybox-close,#fancybox-overlay','click',function(){
FancyBoxClosed();
});
$(document).keyup(function(e){
if(e.keyCode == 27){
if($('#fancybox-overlay').css('display') != 'none')
FancyBoxClosed();
}
});
function FancyBoxClosed()
{
//global callback for fancybox closed
}
For a version other than 1.3.4 double check the fancybox element selectors for the overlay and close button using dragonfly, firefly, or other.
对于 1.3.4 以外的版本，请使用蜻蜓、萤火虫或其他方式仔细检查用于覆盖和关闭按钮的花式框元素选择器。
