Question

我制作了一个“打印页面”功能，当点击按钮激活时，会打开一个新的窗口/标签，并使用特定的HTML和样式填充它，这些样式与原始窗口不同，我正在激活该功能。

使用普通鼠标点击时，一切都按预期工作，但是，当在触摸屏上（或模拟触摸屏）时，新窗口会被阻止。该按钮被绑定到“指针向下”事件，该事件拦截了点击和触摸。

任何人都可以解释这里发生了什么以及为什么“指针式”事件对普通点击与触摸的反应不同，即使他们正在触发相同的事件？我正在使用Chrome（因为我们的应用程序使用文件系统API，我无法在其他浏览器上测试它。）

正常点击会打开新窗口。打开“设备模拟器”并确保将其设置为“触摸”，然后再次尝试单击该按钮：

document.getElementById("print").addEventListener("pointerdown", printPage);

function printPage(e){
    console.log(e);
    window.open("", "printWindow");
}

编辑：我不是在寻找如何使用其他事件绑定来解决这个问题，我正在试图弄清楚为什么特意“指针”会以这种方式起作用。

Answer 1

为防止浏览器阻止window.open调用，您必须拦截“点击”按钮。事件。浏览器可能会阻止您打开窗口。

打开适合触摸和点击的窗口的示例：https://jsfiddle.net/yyfe0824/5/

以下是代码：

<!-- HTML -->
<button class="sillyLink" data-url="http://www.google.com">Google</button>
<button class="sillyLink" data-url="http://stackoverflow.com/">Stack</button>
<button class="sillyLink" data-url="https://developer.mozilla.org/en-US/">MDN</button>

// JS
document.querySelectorAll('.sillyLink').forEach( node => 
node.addEventListener('click', function(e) {
  window.open(e.target.dataset.url);
}))

为什么我的弹出窗口在触摸时被阻止但没有点击使用“pointerdown”监听器？

1 个答案: