标签: pointer-events

有人可以帮我解释为什么当我点击它们时,下拉菜单中的链接无效吗？也许是因为指针事件？我正在尝试在单击链接或单击关闭按钮后关闭下拉菜单.我添加了一些很酷的东西,比如单击链接时隐藏父容器.

有很多选择:

1. 使用:focus但是当使用焦点时,下一个悬停在下拉列表中不会触发下拉列表.

2. :active在容器上使用并pointer-events仅指向活动链接,但指针事件是错误的

3. 使用:target但具有相同的问题:焦点,不会触发第二个胡佛.

body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.test1 {
    display: none;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.container:hover .test1 {
    display: inline-block;
}
.container:hover .test1:active {
    display: none;
}
a {
    pointer-events: auto;
    color: lime;
    font-weight: bold;
}

<ul class="container">
	 Drop down menu
	<li class="test1">
	<a class="dropdown" href="#">X Close</a>
	<ul class="content">
		 CLOSE THIS CONTENT …

我有这支笔:

https://codepen.io/anon/pen/eyKeqK

如果你在触摸屏设备上尝试(fe访问手机上的笔),你会注意到当你拖动时,白光(小球体)只移动一点点然后停止工作.

移动的逻辑在pointermove事件处理程序中.它使用鼠标在桌面上工作正常,而不是触摸.

我们如何解决这个问题,以便在触摸拖动时光线不断移动(不仅仅是片刻),作为奖励我们如何在拉下时防止它刷新页面？

这是笔的代码:

HTML(Slim):

/! Made with http://github.com/trusktr/infamous

script src="https://cdn.rawgit.com/trusktr/e37dbc24c51b9d3e2f9e508e75cf8f99/raw/2a3fee4ee506a05cc4ac509f592f0c3af1ddfed4/infamous-mixed-mode-3.js"
script src="https://unpkg.com/tween.js@16.6.0/src/Tween.js"

i-scene experimental-webgl="true" id="scene" TODO-perspective="800" backgroundColor="0 0 0" backgroundOpacity="0" style="perspective: 800px" shadowmap-type="pcfsoft"

    i-ambient-light color="#404040" intensity="1"

    i-dom-plane id="bg" sizeMode="proportional proportional" size="1 1 0"

        i-node id="button-container" position="0 0 6" size="600 31 0" align="0.5 0.5 0" mountPoint="0.5 0.5 0"

            - for n in (0..4)
                i-dom-plane sizeMode="literal proportional" size="100 1 0" align="#{n*0.25} 0 0" mountPoint="#{n*0.25} 0 0"
                    button button #{n+1}

        i-point-light id="light" color="white" position="300 300 120" …

我在可滚动区域中有一堆子 div，如下所示：

<div style='overflow: scroll;'>
    <div id='a' />
    <div id='b' />
    <div id='c' />
    ...
</div>

我监听每个子项上的pointerdown 事件，当事件触发时，我在文档上设置pointermove 处理程序。例如：

const pointerdownHandle = e => {
    e.target.releasePointerCapture(e.pointerId)
    document.addEventListener('pointermove', pointermoveHandle)
    document.addEventListener('pointerup', pointerupHandle)
}

const pointermoveHandle = e => { ... }

const pointerupHandle = {
    document.removeEventListener('pointermove', pointermoveHandle)
    document.removeEventListener('pointerup', pointerupHandle)  
}

document.getElementById('a').addEventListener('pointerdown', pointerdownHandle)

这在桌面和 iOS Safari 上都非常有效。然而在 Android Chrome 上，pointercancel 事件几乎立即触发，从而破坏了一切。

这似乎是预期的行为： “当浏览器确定不可能再有任何指针事件时，将触发pointercancel事件，或者如果在触发pointerdown事件后，然后使用指针通过平移来操作视口，缩放或滚动。”

推荐的解决方案是将 css 属性“touch-action: none”应用于父元素。这有效。但不幸的是，这也会中断滚动，因为现在触摸操作被忽略。

我尝试在pointerdown事件触发后以编程方式应用css属性，但这不起作用。将 PreventDefault / stopPropagation 添加到pointermoveHandle 也不会。

有人能解决这个问题吗？如何在不禁用父元素滚动的情况下阻止 pointcancel 事件触发？

（我意识到我可以依靠触摸事件，但是支持pointerenter和pointerleave的指针事件使用起来更加简单和干净......）

与-ms-touch-action其他浏览器相同的是什么？

我试图覆盖包含div的指针事件属性.到目前为止,除了IE 11之外,它可以工作.据说,指针事件属性被添加到IE 11.出于某种原因,它不会覆盖它.

.divstyle {
    pointer-events: none;
}
.buttonstyle {
    pointer-events: auto;
}

<div class="divstyle">
    <table>
        <tr><td>
            <input type="button" class="buttonstyle" value="test">
        </td></tr>
        <tr><td>
            <!-- A BUNCH OF CONTENT THAT I DON'T WANT TO HAVE POINTER EVENTS -->
        </td></tr>
        <tr><td>
            <!-- AND ON AND ON -->
        </td></tr>
    </table>
</div>

整个div不允许指针事件,包括按钮.我认为既然div根本没有事件,IE就支持属性指针事件,但是当我明确地设置子事件有事件时,由于某种原因它不会允许它.谢谢您的帮助!

“click”事件是一个鼠标事件，在 mousedown 和 mouseup 事件触发后触发。

现在指针事件有更广泛的用例，所以我想知道指针事件是否也有相应的“点击”事件？

谢谢。安迪