问题标签 [pointer-events]

我正在将 聚合物用户界面卡从 JS 移植到 Dart。

不同之处在于，在我们的项目中（按照惯例），我们有一个包含整个应用程序的附加聚合物元素（app-element）。

在 JavaScript 中它看起来像

我们的 Dart 端口看起来像

app-element有 body 标签在 JS 中的内容

聚合物用户界面卡（在 JS 和 Dart 中相同）

这里的问题是所有指针事件的目标是元素<app-element>而不是<polymer-ui-card>元素。

这是设计使然，还是这可能只是 Dart 的问题，还是我做错了什么？

我有一个问题 Nokia Here Maps（v2.5.3 和 2.5.4），我在页面上实例化了一个地图，我的控制台中一直记录 Javascript 错误：

无法获取未定义或空参考文件的属性“长度”：http: //js.api.here.com/se/2.5.4/base.js Line:218

我调试并发现此错误是在“pointercancel”事件之后引发的，代码想要在“event.changeTouches”上循环，但规范化事件对象中不存在“changedTouches”条目。

要测试这个问题，您只需要在触摸屏上使用 Internet Explorer（10 或 11）。

问候，大卫

我正在尝试在我的 Surface 平板电脑上使用 Internet Explorer 11 的 Pointer API 进行一些实验，但我遇到了一些问题。

我做了一个小提琴来更好地解释（请打开控制台尝试）：小提琴

如果您将手指放在 Result 区域上，pointerdown 事件会在您的手指位置在屏幕上时触发。到这里为止，一切都很好。

但是，如果你移动你的手指，pointerout 大部分是在相同的位置触发的，有时在不同的位置，pointerup 永远不会触发。

我在另一台装有 Windows 8.1 和 Internet Explorer 11 的平板电脑上尝试了相同的代码，但我有相同的行为。

有人对此有任何想法吗？

谢谢你。

我想要做的是有一个.top固定的块（我们称之为它）和另一个块（我们称之为这个.content），当滚动时，它会越过.top，同时保留所有.top包含可点击的内容。

现在有一些明显的设置

这个 http://jsbin.com/rucifuzu/1/edit?html,css,output

或者这个 http://jsbin.com/hufomaxu/1/edit?html,css,output

两者的问题是 a) 你必须考虑滚动条的宽度 b) 滚动/滑动.top不会对overflow: auto下面的元素做任何事情

我想了几个解决方案。

首先是pointer-events: noneon .top，这将使鼠标事件“透明”，因此在它下面触发滚动，问题是点击事件也不起作用，因为我计划在里面有可点击和可选择的东西.top，这是个问题。我可以重新设置pointer-events为auto那些点击/可选择的东西，但考虑到其中一个可点击的东西会成为大标题，我会遇到滚动无法再次使用鼠标位置的问题。

其次是我所说的滚动委托，使用 JS 我会捕获鼠标滚轮事件并更改overflow: auto元素上的 scrollTop。这可以正常工作，除了它可能会在此委托发生时以及在本机滚动启动时导致不同的滚动“感觉” .content。在触摸设备上正确地获得这种行为也是令人痛苦的。

所以两者都不是理想的。我错过了这个问题的任何巧妙而简单的解决方案吗？

TL;DR 目标是让.top元素既可点击又“可滚动”

1. 这种方式.top是可点击的，但它下面的元素不会滚动- http://jsbin.com/hufomaxu/1/edit?output
2. 这样它下面的元素会滚动，但.top 不可点击- http://jsbin.com/tuluwili/1/edit?output

可以有一个带有指针事件的外部 div：无；和它里面的另一个div，带有指针事件：auto;。外部 div 对点击事件是透明的（即它不会对点击事件做出反应，但底层 html 控件会），而内部 div 会。

但是，我现在有一个场景，我需要用 iframe 做同样的事情，但它不起作用。我设置了指针事件：无；在 iframe 上，但是应该可以点击的内部 div 不是即使它们有指针事件：auto; 放。

这里还有另一个类似的问题，但因离题而被关闭。我不明白为什么。这是一个非常有效的 html/css 问题。

我需要在 webkit 浏览器中将禁用的输入选择框设置为可点击（在 IE 下工作，在 chrome、opera、safari 下没有）。

我的页面结构如下：

我的页面执行以下步骤：

/1。添加新的href到

/2。为自定义 jquery 选择框设置新颜色，然后设置为禁用

在 IE 中，我可以单击禁用选择框，但在 webkit 浏览器（chrome、safari）和 Firefox 中我不能：（

我尝试将 pointer-events:none 添加到我的禁用选择框（所有方式：通过 jquery，通过 css），但自定义 jquery 选择框（跨度）也继承了 pointer-eventets:none 设置。它仅在我手动禁用（在chrome开发人员工具中）第二个指针事件设置（从跨度）时才起作用。

请帮忙 ：{

我在pointer-events:none;网站顶部的主照片上使用http://www.onedirection.net/，以允许用户选择图像后面的导航。

但是，我想让用户单击乐队的每个成员以转到单独的页面，但仅适用于不与导航重叠的图像部分。

我有点坚持这一点。可以做到吗？我正在考虑使用图像地图，但如果导航变得“不那么可点击”，它就无法正常工作。

我在彼此上创建了四个 div（绝对定位），以便我能够围绕同一个中心旋转它们。问题是，我在每个 div 中都有一个链接，因此不再起作用（无法点击）。我设法让它们在 Firefox 中使用“指针事件：无”；在 div 和“指针事件：自动；” 在链接上。不幸的是，这只适用于 Firefox。所以我想知道是否有人有另一种解决方案（可能没有 JavaScript）来支持 Safari 和 Chrome 中的链接（可能还有 IE）。

HTML：

CSS：

这是 jsFiddle：http: //jsfiddle.net/jf6A5/。

预先感谢您的帮助。

我有一个交互式背景，它使用 css 来改变悬停时的不透明度。在此之上（绝对定位）是一个文本层。为了让背景即使对顶部的文本也做出反应，我已将 css pointer-event:none添加到包含文本的 div 中。

这很好用，但如果我仍然可以保留突出显示文本的能力会更好。

有谁知道限制哪些指针事件被抑制？

下面的代码是我正在尝试做的一个非常简单的版本。我试图在按下元素时触发循环功能。这是用于触摸屏的，所以在生产中我实际上是使用hammer.js 来统一触摸监听器。这种奇怪的事情发生在 IE 11 中。实际的指针事件在上下文菜单“圆圈”（显示您在浏览器上按住手指的小浏览器动画）完成打开上下文菜单的尝试之后才会触发。

如果快速按下并释放，则pointerdown 和pointerup 事件都会随着单个循环连续触发。

这只发生在 IE 11 中，chrome 的行为与我预期的一样。这也发生在鼠标事件（以及手指触摸屏幕，而不是鼠标）中，它发生在hammer.js 的触摸和释放事件中。

毫不奇怪，如果“手指”在按住时移动，则脚本将按预期工作，并且上下文菜单“圆圈”不会尝试打开。

我应该澄清这仅在 Windows 7 中发生。Windows 8 的行为与我预期的一样。相同版本的 IE 11.0.9600。我也尝试过 e.stopPropagation() 并尝试在元素和身体上触发鼠标移动，这可能会假冒浏览器认为手指已经移动。

我知道这似乎是一个边缘案例，但不幸的是，我有点坚持需要让项目在这个特定的操作系统/浏览器组合中工作。