【SEO优化】jQuery 禁止子元素响应父元素点击事件

jQuery 禁止子元素响应父元素点击事件,

泪雪网移动端已经全新改版上线，其中IT131开发也遇到了一些不大不小的问题，总的来说是因为自己才疏学浅导致，尤其是完全重写了网站的评论功能和交互，由于页面设计的和效果，需要做遮罩和事件绑定。

那就是当我们父元素和子元素都绑定了 click 点击事件后，父元素的点击事件就会覆盖掉子元素的绑定的点击事件，为此我们就需要避免子元素响应父元素的点击事件，从而进行子元素的交互和事件。

具体实现方式比较简单，需要做一个判断即可：

1
2
3
4
5

$('.overlay').on('click', function(e){
	if (e.target == e.currentTarget){//防止父元素覆盖资源的绑定事件操作
		//执行父元素的事件
	}
});

其实可以在简单的啰嗦几句，就是分享一下IT131开发遇到的详细情况，那就是当用户点击评论时会从页面底部弹出评论框，而整个背景是需要做一个灰色遮罩，并且能够在点击灰色区域后触发隐藏或关闭评论框的的动作，而评论框也直接具备“取消”和“评论”两个按钮，所以就会用到以上的判断。

虽然说可以避免使用父子关系的布局，但是IT131却没有想到比此更极致的解决方法，所以我认为这样的编写是我觉得最高效和极简的思路，所以简单的分享记录一下，避免自己未来某天忘了还能上自己的博客上找找。