DigitalOcean 提供适用于您旅程各个阶段的云产品。立即开始使用 价值 200 美元的免费积分!
pointer-events
属性允许控制 HTML 元素如何响应鼠标/触摸事件,包括 CSS 悬停/活动状态、Javascript 中的点击/轻触事件以及光标是否可见。
.avoid-clicks {
pointer-events: none;
}
虽然 pointer-events
属性可以接受 *11 个* 可能的值,但除了三个值之外,其他所有值都保留用于与 SVG 结合使用。对于任何 HTML 元素,三个有效值为
none
会阻止指定 HTML 元素上的所有点击、状态和光标选项auto
恢复默认功能(对于指定了pointer-events: none;
的元素的子元素很有用)inherit
将使用元素父级的pointer-events
值
Check out this Pen!
如上所示,pointer-events
的主要用例是允许点击或轻触行为“穿透”某个元素,到达 Z 轴上它下面的另一个元素。例如,这对于图形叠加层或隐藏带有 opacity
的元素(例如工具提示)并仍然允许选择下层内容的文本很有用。
关注点
- “在 CSS 中将 pointer-events 用于非 SVG 元素是实验性的。此功能曾经是 CSS3 UI 草案规范的一部分,但由于许多未解决的问题,已推迟到 CSS4。” — Mozilla MDN
- “如果您将点击事件监听器添加到元素中,然后删除 pointer-events 样式(或将其值更改为 auto),则点击事件将触发指定的函数。基本上,点击事件会尊重 pointer-events 值。” — David Walsh
其他资源
浏览器支持
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 3.6 | 11 | 12 | 4 |
移动/平板
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 2.1 | 3.2 |
在某些浏览器中,当在 <svg>
上使用时,支持更深入,例如,IE 9 支持它。
这对禁用禁用按钮和表单元素的悬停/活动状态非常有效。
但右键单击仍然有效
@deepak – “什么是右键单击?” - 20 年的 Mac 用户。
右键单击是一个鼠标操作,但不是指针事件。DOM 的 HTML API 没有定义“onrightclick”事件,也没有针对该事件的本机侦听器。处理右键单击的最接近的匹配项是用于弹出菜单的较新的上下文菜单 API,但这并不是直接由右键单击引起的,因为任何键盘键或交互式设备都可以设置为打开上下文菜单。
@Tony – 刷新一下你的 JS 知识。右键单击是通过
onclick
本机处理的,其中event.button == 2
- 请参阅 https://mdn.org.cn/en-US/docs/Web/Reference/Events/click 。而且不要吹嘘自己 20 年的 Mac 用户身份,这就像你在寻求讽刺一样;)请记住,你已经可以通过按 Tab 键并在输入框中输入文本来编辑文本了 =D。
你必须在表单元素上禁用状态并设置 readonly=”readonly”…
不幸的是,如果你在 SVG 文件中使用“悬停 CSS”,这些技巧将无效。
我在 IE11 中测试了上面的演示,它有效。哇哦!
它有效,但请注意;在已将 pointer-events 设置为
none
的元素内部,为了让 IE11 注意到pointer-events: auto
,目标元素也必须具有除static
之外的 CSSposition
参考:https://coderwall.com/p/s8pjpg
@RK – 谢谢您,尊敬的先生
我唯一的问题是,它不显示链接的标题。
pointer-events 和 oncontextmenu 之间存在不匹配
太棒了!我确实需要更多时间来试验 SVG,这似乎比在 JavaScript 中缓解事件冒泡要好得多。我注意到你在圆形的容器上注册了哪个画布的点击事件,但在 SVG 中,圆形几乎就像一个裁剪遮罩(或 Flash 中的遮罩)。我尝试在 SVG 中使用裁剪遮罩并将 foreignObject 放在裁剪遮罩内部,但发现裁剪遮罩不接受 foreignObject。
有人知道如何在 SVG 中添加圆形对象并在圆形中旋转,其中圆形外边缘后面的任何内容都不会被上面的 SVG 注册为事件吗?想象一下像旋转电话机一样,旁边有一个开关。
这将是允许事件“通过”元素并暂时禁用伪状态的一种便捷方法。
但我很难理解它对其他任何事情有什么用处。
例如,如何在不阻塞缩放和缩放手势的情况下使用指针事件实现拖放?似乎不可能。
Microsoft 建议将“touch-action”设置为“pan-x”或“pan-y” - 例如,如果将其设置为“pan-y”,则垂直滑动会滚动页面,而水平滑动会触发可用于拖放的事件。因此,拖动操作仅在水平进行时才有效。
对于禁用页面缩放的应用程序来说,这可能是可以接受的,但在网页上没有用,因为缩放可能足够大,以至于页面会双向滚动。我认为无论哪种方式都不特别直观。
指针事件可能是一个有用的高级抽象,但它们不能替代适当的低级触摸事件。
嗯,这与我预期的不一样……在这个示例中,它似乎没有将事件传递给堆叠顺序或 z-index 下面的元素,如本文所述,因此如果你有一个全视窗覆盖并且希望与下面的(下面的)元素进行交互,这将毫无用处。我理解错了吗?
http://codepen.io/pingram3541/pen/hvtFH (尝试“通过”div.four 点击 div.two)它不起作用,也不显示锚点的悬停状态。示例既有继承的锚点,也有 js 事件处理程序。
我部分收回上篇文章……我真不敢相信自己这样做,因为我几乎不使用 IE,除了测试它破坏的东西……但事实证明,我在构建 codepen 时使用的是 IE,哈哈。css 规则在 webkit 上有效。=)
哈哈,我希望可以编辑我的评论,以免污染这个主题……
找到了 IE 的解决方案,但它并不完美……由于 WC3 规范是针对 svg 的,如果覆盖被定义为 svg,则实际上会通过指针事件。
一个可能的 js 解决方案 - http://www.vinylfox.com/forwarding-mouse-events-through-layers/
这行 CSS 太棒了 - 可以取消链接,无需触碰 PHP
“pointer-events: none;”
我用它来取消 WP 中的顶级链接菜单。
如果它也影响子菜单,则在子菜单 CSS 上设置“pointer-events: auto;” 。
效果很好。
似乎它在固定元素上不起作用……
http://www.cybertechquestions.com/position-fixed-element-not-passing-through-pointer-event-click_87096.html
实际上,它在固定元素上有效。我有一个固定用户栏,里面有一些图标(指向登录等的链接)。作为响应式布局,菜单会折叠成一个固定菜单栏(透明背景),它位于用户栏之上。用户栏中的图标不再可访问。通过在菜单栏上使用 pointer-events:none 并在菜单项上使用 pointer-events:auto,一切按预期工作,即使通过固定元素也是如此。
这简直是救了我的命。
我正在做一个画廊覆盖,我将在悬停时显示一个放大镜。问题是,覆盖层优先于锚点,而我使用的 Foundation Clearing 画廊依赖于点击的内容来识别画廊内容。
覆盖 div 上的 pointer-events:none 就解决了所有问题。:D
我更希望有单独的“click-events”和“hover-events”属性,这样我就可以分别控制它们。毕竟,“指针”甚至不是一个事件,哈哈。我想触摸事件也可以分成滑动事件和点击事件,但我还没有发现它的用例。
我赞成这个提议 ^_^
你确定这在 Android 版 Chrome 上有效吗?
好的,我找到了解决方法
http://stackoverflow.com/questions/21474722/touchmove-pointer-events-none-css-doesnt-work-on-chrome-for-android-4-4-chro
这对于纯 CSS 下拉菜单非常棒!那个 CSS 下箭头一直困扰着我。谢谢!http://codepen.io/kaela/pen/LAfEu
你关于 IE9+ 中使用此属性的内联 SVG 的结尾说明为我节省了大量时间。感谢你的详尽解释!
我发现这在 IE11 中不适用于伪元素。我将 :after 元素定位在选择器上方,并尝试让鼠标点击穿透到选择器元素,但使用 after 元素无效。它确实适用于普通跨度,所以我只使用了跨度,但如果你想在任何伪元素上使用它,请注意这一点。
测试 测试 测试 测试 测试 测试
鼠标事件可能不起作用,但例如 Iphone ios 等移动设备上的触摸会起作用。要禁用移动设备上的触摸,可以使用。
你确定吗?这适用于 IE11 + Windows 7 吗?
因为,我尝试使其工作,但单选按钮仍然处于活动状态。
这是一个有趣的 CSS 属性,以前从未见过。我正在修复一个 bug 并偶然发现了它。顺便说一下,那就是问题所在,哈哈!
我花了一个多小时试图弄清楚如何防止悬停事件,直到我看到了这篇文章。
我一直受到有趣的设计挑战,并找到使用 CSS 的新方法。
pointer-events: none;
现在是我的另一个工具。
谢谢。
不错,我使用 pointer-events 在点击 woocommerce 产品时禁用触发产品图像灯箱。很管用
“none 阻止指定 HTML 元素上的所有点击、状态和光标选项”可能需要使用更好的措辞。例如,
focus
状态事件仍将通过使用 tab 键切换到元素而触发。Chris Coyier 非常感谢您!