鼠标遮罩点击事件pointer-events

已于 2022-11-14 15:53:06 修改
阅读量124 收藏
点赞数
分类专栏： 前端 文章标签： jquery css html javascript css3
于 2021-07-22 13:28:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45393395/article/details/120564685
版权

如何让被遮挡层可以进行事件点击

  • 外层(被遮挡的层){ pointer-events: none; }
  •  内层(要发生事件的层){ pointer-events: auto; }

pointer-events属性本身有很多取值，但只有none和auto可以用在浏览器上，其他都只能应用在SVG上

  • 取值none：元素永远不会成为鼠标事件的target
  • 取值auto：与pointer-events属性未指定时的表现效果相同(即将元素恢复成为鼠标事件的target)
百度一下吧
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JS DOM 鼠标事件默认事件 鼠标右键 事件覆盖 添加事件监听 （一）
MrHuBingo的博客
06-06 2160
我们在使用原生JS 操作DOM 会遇到各种各样的问题 如何去解决他们 就需要一些经验了 当我们在html 中 定义一个DIV 命名为 #demo 时 给它写出两个一摸一样的点击事件时候 会发生覆盖事件 如图 let demo = document.getElementById('demo') demo.onclick = function (){ console.log(111)
点击遮罩层的背景关闭遮罩层
01-08
class=Select_Region_bj 我给了一个灰色半透明的背景样式，后来在Javascript中写onclick事件无论这么写，点击内容区也是会关闭掉遮罩层。我百思不得其解到底怎么样写才能点击内容区不会关闭遮罩
JavaScript（事件）
Salmon
07-28 390
 通常鼠标或键盘的动作称之为事件，而由鼠标或键盘的动作引发的一连串程序动作，称之为事件驱动。对事件进行处理的程序或函数称为事件处理程序。事件处理程序的基本语法：        function 事件处理名(参数表){                 事件处理语句集；                 …… ……                }调用时间处理程序的基本语法：        事件驱动
mouseover事件和mouseenter事件以及mouseleave事件和mouseout事件的区别
weixin_43183219的博客
02-15 1万+
mouseover事件，mouseenter事件，mouseout事件，mouseleave事件详解以及实例演示
暑期学习日记23：事件处理
weixin_48485475的博客
08-07 90
事件处理
winform自定义控件中其他遮挡控件点击事件
denglei8524的博客
01-16 1063
自定义控件在其他窗口调用时,里面的lable阻挡了控件的点击事件 解决方法 自定义控件中lable的点击事件 private void Lable1_Click(object sender, EventArgs e) { base.OnClick(e);//触发控件点击事件 } 转载于:...
winform 在mdi窗口重绘界面时,mdi挡住主窗体,导致鼠标拖动缩放窗体大小失效的解决方法随笔
atlasroben的专栏
11-18 1624
   #endregion        protected override void OnControlAdded(ControlEventArgs e)        {            base.OnControlAdded(e);            this.label1.Text +=e.Control.GetType().Name;            if (e.Con
Bootstrap鼠标悬停图片遮罩特效.zip
07-11
代码简介：Bootstrap鼠标悬停图片遮罩特效是一款基于CSS3实现的鼠标移到图片上显示遮罩显示文字信息。
CSS3鼠标悬停图片遮罩动画特效
06-24
CSS3鼠标悬停图片遮罩动画特效是一款鼠标悬停图片炫酷动画，遮罩层图标和文字动画特效。
vue 遮罩层阻止默认滚动事件操作
11-20
在写移动端页面的时候,弹出遮罩层后，我们仍然可以滚动页面。 vue中提供 @touchmove.prevent 方法可以完美解决这个问题 ”dialog”> 如果不是使用Vue的话，可以给body添加overflow:hidden属性解决 补充知识：vue...
Bootstrap鼠标悬停图片遮罩特效
06-24
Bootstrap鼠标悬停图片遮罩特效是一款基于CSS3实现的鼠标移到图片上显示遮罩显示文字信息。
android高德覆盖物点击,覆盖物点击和鼠标事件
weixin_28309723的博客
05-27 442
覆盖物事件html,body,#container{height:100%;width:100%;}请点击覆盖物试试覆盖物点击事件的绑定与解绑绑定事件解绑事件//初始化地图对象，加载地图var map = new AMap.Map("container", {resizeEnable: true});var marker = new AMap.Marker({map: map,icon: "htt...
鼠标事件
wjlgryx的专栏
05-30 136
事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件 onMouseOver IE3|N2|O3...
JS-事件/鼠标单击事件( onclick ）/鼠标经过事件（onmouseover）/鼠标移开事件（onmouseout）/光标聚焦事件（onfocus）/失焦事件（onblur）/内容选中事......
Jennyni1122的博客
06-17 8871
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。 主要事件表: image.png 鼠标单击事件( ...
Js-三大事件（鼠标事件、键盘事件、html事件）
热门推荐
qwer_df_b的博客
08-23 9万+
鼠标事件、键盘事件、html事件
JavaScript第一课鼠标覆盖和移出
weixin_38505405的博客
09-24 1399
第一个Java效果文件 html> lang="en"> charset="UTF-8"> 第一个JavaScript效果 #div1{width:200px; height:100px; background:#ccc; border:1px solid #999; display:none} type="checkbox"/> id="div1"
鼠标穿透/解决标签遮罩/覆盖元素响应事件
wangxuejava的博客
12-29 651
CSS样式：给遮罩下的标签加上此css属性。 一共有两个属性，默认为：auto，遮罩层事件不会响应 pointer-events: auto; 设置为:none,遮罩层事件会响应下面的事件。 pointer-events: none; 仅此记录一下。 ...
一个鼠标移出事件引发的问题
wonderful_life_mrchi的博客
09-02 1万+
onmouseout和onmouseover事件在没有子元素的元素中可以正常响应事件代码，可是如果该元素涉及到子元素，则会因为事件冒泡机制，导致非正常响应，下文就是透析现象的本质，并提供了解决方案。
pointer-events:none;
最新发布
11-22
下面是一个示例代码，其中一个元素的pointer-events属性被设置为none，另一个元素的pointer-events属性被设置为auto，可以看到只有后者可以响应鼠标事件和触摸事件： ```html <div class="click-through"> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

百度一下吧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值