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

leixue 设计开发 2019-06-12 13:44:40 阅读(...) 评论(2)

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

jQuery

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

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

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

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

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

除非注明,否则均为泪雪博客原创文章,禁止任何形式转载

本文链接:https://zhangzifan.com/target-currenttarget-on-jquery.html

发表评论

  1. 奶爸de笔记
    1楼
    奶爸de笔记 7天前

    不懂js,经常碰到坑。

    • 张子凡
      回复
      张子凡 5天前
      回复 @奶爸de笔记 :懂不懂的不重要,会用就行了