点击遮罩层的背景关闭遮罩层

學點 2019-01-16 08:22:28
在模仿华为官方网页的练习当中我发现华为官网中有一个遮罩层是随便点击遮罩层的背景也能关闭掉遮罩层,但唯独点击内容区域不会关闭掉遮罩层。于是我开始模仿这个写案例,连内容也一模一样(因为这个练习就是要写出和华为关一样的效果或则比它更好的效果),一开始我是这样子写的(图1)

图1
class=Select_Region_bj 我给了一个灰色半透明的背景样式,后来在Javascript中写onclick事件无论这么写,点击内容区也是会关闭掉遮罩层。
我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩层,后来下课期间我看见我同学他写的带能点击内容区不会关闭遮罩层。我问他你是这么写的,他告诉我:“把他们分离就可以的了。”我思考了一会,脑补:分离?怎么分离?补着补着补着就补出了背景和内容区分离。分离写(图2)

图2
把背景层和内容区分开来写,不要在背景层中包裹内容,这样子点击内容区就不会关闭掉遮罩层了!
...全文
1229 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
芒果皮贼难剥 2019-01-24
  • 打赏
  • 举报
回复
引用 3 楼 我不是老岑 的回复:
兄弟你发错贴了 你这个是提问的地方,,你去发博客才行,要不然你这个作业不算数,,记得20积分要结算给我
不用谢我,我是雷锋!!!
手机版没有博客,只有论坛
風灬雲 2019-01-22
  • 打赏
  • 举报
回复
这个功能以后会用的很多的,最简单的办法就是阻止事件冒泡,但是这个方法需要在里面的内容上面加一个点击事件,如果内容部分刚刚好有点击事件就最好不过;还有一种方法就是点击背景图的时候判断事件对象event的target触发事件的目标节点,如果是背景部分就隐藏;你同学说的也算一种实现方法吧,不过这个方法不推荐,代码块的功能统一原则,为了写一个功能出现两个代码块,可读性没有那么好
clj_dream 2019-01-21
  • 打赏
  • 举报
回复
这是在秀吗?
相忘一江湖 2019-01-18
  • 打赏
  • 举报
回复
不按格式发?
我不是老岑 2019-01-17
  • 打赏
  • 举报
回复
兄弟你发错贴了 你这个是提问的地方,,你去发博客才行,要不然你这个作业不算数,,记得20积分要结算给我 不用谢我,我是雷锋!!!
天际的海浪 2019-01-16
  • 打赏
  • 举报
回复
这个不用分离,在内容区的click事件中用 event.stopPropagation() 停止事件冒泡就可以了
zhangpaopao0609 2019-01-16
  • 打赏
  • 举报
回复
因为你写在一起就会冒泡了呀! 这时候你可以选择阻止冒泡就可以其实!

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧