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

来自:互联网
时间:2019-07-14
阅读:

jQueryC20免费资源网

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

具体实现方式比较简单,需要做一个判断即可:C20免费资源网

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

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

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

返回顶部
顶部