iPhone Safari 冒泡事件

感谢 Xdoudou的分享

应用场景 写了一个下拉菜单，在单击空白地方的时候隐藏。

不生效的代码

$('.icon-nav').click(e=>{
	$(".nav").fadeIn()
	e.stopPropagation()
})

$('body').click(()=>{
	$('.nav').fadeOut();
})

Safari中是这样处理事件冒泡的：

1. 点击某个DIV或其他元素。
2. 发现没有处理该事件，继续往上冒泡。
3. 直到冒泡到body下面的子节点为止，还是没有人处理该事件的话，就把该事件丢弃掉。不再往上冒泡。
4. 只要在这一条冒泡链当中，有一个节点处理了该事件，它就不会丢弃该事件，会继续往上冒，冒到body 然后document 然后window .

解决方案

$('.icon-nav').click(e=>{
	$(".nav").fadeIn()
	e.stopPropagation()
})

$('body').children().not('.icon-nav').click(()=>{
	$('.nav').fadeOut();
})