问题标签 [pointer-events]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1053 浏览

javascript - 如何在包装器div的鼠标悬停时更改图像

我正在尝试在 ESRI Map Journal 模板上设置一个简单的脚本,其中链接图像在悬停时发生变化。通常我会做这样的事情;

但是,这在 Map Journal 上不起作用,因为模板会自动插入一个带有指针事件的包装 div:all; 财产。之所以这样做,是因为 Map Journal 模板会自动将图像设置为在灯箱中打开。所以为了抵消这一点,并允许图像链接到其他东西,使用了包装器 div。所以它变成了;

但是,这样做会停用上述悬停脚本。如果我用指针事件覆盖 div CSS:无,悬停脚本有效,但链接不起作用。

有关解决此问题的任何建议,以便链接和悬停都可以工作?我考虑过更改脚本,以便鼠标悬停在 div 上起作用,但随后它会更改图像。如何在 JS 中编写代码?或者也许有不同的解决方案?

0 投票
0 回答
539 浏览

ionic-framework - 离子加载显示时在点击事件上启用元素

我想让我的应用程序左上角的菜单按钮可以在离子加载显示时被点击,我有后退边距以使菜单按钮不与离子加载背景重叠,这是我的代码:

这是我在 app.js 中调用离子加载的代码之一:

我也将指针事件设置为自动,但无法单击我的按钮菜单,有人可以帮忙吗?

0 投票
1 回答
1044 浏览

css - 指针事件:无 - 尝试点击 PNG 下方的 iframe

我正在尝试将“指针事件:无”设置为半透明的 PNG,以便能够导航放置在该 PNG 下方的 iframe(它是谷歌地图)。我尝试将“pointer-events:auto”赋予 iframe,并将“pointer-events:none”赋予父 div,但它们都不允许点击。

对于信息,iframe 是绝对定位的,而 png 和父 div 都是相对的。

HTML 非常简单:

这是CSS:

这是网站:

www.thehermitcrab.org (向下滚动一点点,您会看到地图)

非常感谢您!

0 投票
1 回答
371 浏览

javascript - IE Edge 上的跨帧事件打破 HammerJS (v2)

我面临一个奇怪的问题,我认为 HammerJS 内部事件循环带有一个卡住的事件,会破坏后续检测。

这只发生在带有 PointerEvents 的触控设备上的 Internet Explorer Edge 上。

基本上,当将 HammerJS 用于PAN事件(panstart-> panmove-> panend)时,并且您越过当前帧边界(例如,进入 IFRAME,或者就在浏览器窗口之外)并且您在那里松开手指,那么 HammerJS 永远不会收到 CANCEL事件和会话类型保持不变。

从那时起,所有手势都被错误报告,比您正在使用的手指(“指针”)多一个:例如,它会报告一个 PINCH 或 ROTATE(2 个指针),只需轻按(1 个指针)等等。

一旦 Hammer Manager 进入这种幽灵状态,我还没有找到重置它的方法。这打破了我的应用程序。

我准备了一个带有完整工作示例的小提琴。请在 Windows/Touch 设备下执行!

在此处输入图像描述

https://jsfiddle.net/28cxrupv/5/

我想知道,如何检测越界事件,或者如果我能够通过其他方式检测到自己存在卡住事件,我该如何手动重置 Hammer Manager 实例。

更新

我在调查中发现问题出在 HammerJS 的最低级别:PointerEvents 处理程序有一个检测到的指针数组,this.store并且有一个带有旧时间戳的卡住事件。

0 投票
1 回答
11411 浏览

css - 指针事件:没有在 IE 中不起作用

我正在尝试禁用我的 SharePoint 2013 列表编辑页面中的超链接。我使用了内容编辑器 webpart 并将pointer-events : none. 它在 Google Chrome 上运行良好,但在 IE 中不起作用。有没有其他选择?我只想要 CSS 替代品。我的 IE 是 10 版。

0 投票
3 回答
368 浏览

javascript - 1 在禁用指针事件后触发最终鼠标移出

我的场景是我在 div 上听“click”和“mouseout”事件。当点击事件触发时,一个类被添加到 div 以禁用指针事件。除了在禁用指针事件后将触发 1 个最终的“mouseout”事件之外,此方法有效。任何想法为什么/如何解决?

http://codepen.io/BradLee/pen/grzrOz

0 投票
1 回答
2448 浏览

html - 支持使用指针事件在可滚动的 div 中拖动和平移

考虑可滚动区域中的可拖动 div 的情况。当您触摸 div 内部时,进一步的手指移动应该在该区域周围拖动 div。当您触摸 div 外部时,进一步的手指移动应该平移可滚动区域。

我有一个 JSFiddle 来说明这一点。使用鼠标,我可以轻松地拖动 div,但触摸事件似乎也不起作用。

注意:我在小提琴中使用了指针事件,所以如果您使用的浏览器不支持它们,看起来小提琴似乎坏了。

有谁知道如何正确实现这种交互?

http://jsfiddle.net/mrmills/13t34jsv/

HTML:

CSS:

JS:

0 投票
1 回答
128 浏览

html - 我可以激活弹出窗口吗
对他人做某事
?

我有一个链接,点击后会显示一个弹出窗口。

单击链接时,将显示一个叠加层和一个弹出窗口。

分区

CSS

我的问题是,当弹出窗口可见时,我仍然可以单击覆盖并点击 div 容器中的其他链接。有没有办法设置“指针事件:无;” 只要我的弹出窗口可见,就可以应用于 div id="container"?

0 投票
0 回答
41 浏览

css - 将鼠标事件转发到底层闪存

我所做的是在使用我的网络摄像头拍摄快照的闪存上创建一个图像层。我使用 position: absolute 将图像正确定位在闪光灯上。并添加 wmode: 对我的 Flash 嵌入透明。然后我需要将鼠标点击转发到我的 Flash 内容,以便我的用户可以允许使用他们的网络摄像头。我添加了点事件:无;到我的叠加图像。

这里的情况是,所有内容都可以跨浏览器正确显示,但仅在 chrome(Windows 和 Mac)上,我可以单击“允许”按钮,并且实际上可以使用我的网络摄像头。在 Safari、Firefox、IE 上,他们不允许我点击允许。

我想知道访问底层 Flash 项目的点事件是否存在已知问题,或者我的 Flash 播放器有问题。因为如果我将闪光灯切换到覆盖图像下方的可点击按钮,它就可以正常工作。

0 投票
1 回答
700 浏览

css - ie11 windows 7上带有内联块的指针事件

我遇到了一个非常奇怪的错误,它只适用于 Windows 7 上的 ie11:

应用于pointer-events: none父元素时,pointer-events:auto不适用于具有该元素的元素display:inline-block

它也可能发生在 Windows 8 上,但它似乎已经在 Windows 10 上修复了。

下面是我的意思的示例片段,您可以看到屏幕在悬停时会变成浅蓝色。我已删除所有内容的指针事件,然后为绿色​​框和不透明的白色面包屑列表重新打开它。

您可以看到绿色框转有它自己的指针事件(将背景转回深蓝色),因为面包屑被完全忽略

有没有inline-block办法让它在 Windows 7(也许是 Windows 8)上与 ie11 一起工作?

ps 我已经使用浏览器堆栈对此进行了测试,并且它在我描述的设置上正常工作,所以不确定这是否只是本地化到一台笔记本电脑,因为我没有任何其他 Windows 7 机器来测试它

这是我弄乱的小提琴

如果您使用上述小提琴并将 inline-block 元素转换为块元素,您可以看到指针事件再次起作用