英文:
Disable double tap magnifying glass in Safari iOS
问题
I'm making a web browser game and I found out that double tapping in Safari iOS brings up this magnifying glass feature:
我正在制作一个网页浏览器游戏，我发现在Safari iOS中双击会触发这个放大镜功能：
I want to disable it, but can't manage to find out how. I tried user-select: none (actually -webkit-user-select: none for Safari), touch-action: none and a wide variety of event.preventDefault().
我想要禁用它，但无法找到方法。我尝试过使用user-select: none（实际上对于Safari，应该使用-webkit-user-select: none），touch-action: none以及各种event.preventDefault()。
There are topics covering how to hide it for long press (and here -webkit-user-select: none works), and other topics how to disable double tap zoom, but I haven't found a way to hide this magnifying glass for double tap gesture.
有一些讨论如何在长按时隐藏它的主题（在这里-webkit-user-select: none有效），以及其他关于如何禁用双击缩放的主题，但我还没有找到一种方法来隐藏这个放大镜以防双击手势触发。
Can it even be done?
这是否可以做到？
英文:
I'm making a web browser game and I found out that double tapping in Safari iOS brings up this magnifying glass feature:
I want to disable it, but can't manage to find out how. I tried user-select: none (actually -webkit-user-select: none for Safari), touch-action: none and a wide variety of event.preventDefault().
There are topics covering how to hide it for long press (and here -webkit-user-select: none works), and other topics how to disable double tap zoom, but I haven't found a way to hide this magnifying glass for double tap gesture.
Can it even be done?
答案1
得分: 2
如果你的游戏是嵌入的WKWebView，则在WebView的配置中有一个属性可以禁用交互文本。这将关闭通过放大镜选择、双击和拖动放大文本的能力。但这也会改变所有文本交互的行为。因此，最好小心使用。
let config = WKWebViewConfiguration()
let view = WKWebView(frame: .zero, configuration: config)
view.configuration.preferences.isTextInteractionEnabled = false
如果是通过Mobile Safari访问的网站，那么你可以拦截特定元素的touchend和touchcancel事件传播。不过，这也可能导致其他意外效果，比如事件不会冒泡到其父元素的click事件，或者事件链不会完成，比如同一元素的click事件。
const eventParams = { passive: false };
document.body.addEventListener('touchcancel', ignore, eventParams);
document.body.addEventListener('touchend', ignore, eventParams);
function ignore(e) {
e.preventDefault();
}
我没有找到仅使用CSS来禁用这一功能的方法。
英文:
If your game is an embedded WkWebView there is a property in your configuration of the web view that can disable interactive text. This turns off the ability to select, double-top and drag to enlarge text via the magnifying glass. But, it also changes the behavior all text interaction. So, perhaps it's best to use with caution.
let config = WKWebViewConfiguration()
let view = WKWebView(frame: .zero, configuration: config)
view.configuration.preferences.isTextInteractionEnabled = false
If it's a website available through Mobile Safari, then you can intercept event propagation for specific elements through the touchend and touchcancel event. Though, this can also have other unintended effects basically that the events won't bubble up to their parents for clicks or that the chain of events won't complete, like the same element's click event.
const eventParams = { passive: false };
document.body.addEventListener('touchcancel', ignore, eventParams);
document.body.addEventListener('touchend', ignore, eventParams);
function ignore(e) {
e.preventDefault();
}
I haven't found a way only in CSS to disable this.
答案2
得分: 0
这是我为Safari解决此问题的示例：
main();
canvas.addEventListener("touchend", e => game(e));
canvas.addEventListener("touchstart", e => game(e));
canvas.addEventListener("touchmove", e => game(e));
document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });
通常你只需要添加这行代码：
document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });
还有，如果你在函数game(e)（或其他函数）中添加e.preventDefault()对我来说不起作用。
英文:
Example of how I solved this problem for Safari:
main();
canvas.addEventListener("touchend", e => game(e));
canvas.addEventListener("touchstart", e => game(e));
canvas.addEventListener("touchmove", e => game(e));
document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });
All you normally have to do is add this line of code :
document.body.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });
Oh also if you add e.preventDefault() in the function game(e) (or other for you) is not working for me
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论