我想做一些东西,允许用户从一个模式对话框中拖动元素,并将它们放在页面上.
因此,一旦用户开始拖动,我就会呼叫dialog.close()
.这在台式机上运行得很好,但在touch 式设备上,‘PointerMove’事件不会触发.
有关示例,请参阅下面的片段:
dialog.showModal();
button.addEventListener("pointerdown", () => {
dialog.close();
});
container.addEventListener("pointermove", () => {
console.log("move");
});
html, body, dialog, #container, #button {
touch-action: none;
}
#container {
width: 100px;
height: 100px;
background: red;
}
#button {
width: 50px;
height: 50px;
background: green;
}
<div id="container">
</div>
<dialog id="dialog">
Emulate a touch device using devtools and drag the green square to the red square.
<div id="button">
</div>
</dialog>