Javascript

Question

当前 Google chrome 稳定版停止手动阻止捏合缩放，这在旧版本中可以通过以下设置实现：

chrome://flags/#enable-pinch

我的售货亭受到随机捏合 zoom/multi 触摸输入的攻击。

如何告诉 JavaScript 禁用捏合 zoom/multi 触摸？（保护售货亭）

我试过跟随，但没有什么能阻止自助服务亭忽略缩放攻击。

$(document).ready(function() {

  $(document).bind('contextmenu', function()  {
    console.log('NO NO NO. STOP!!!');
    window.location.reload();
    return false;
  });

  $(document).mousedown( function() {
    console.log('NO NO NO. STOP!!!');
    return false; 
  });

});

编辑：

chrome://flags/#enable-pinch - 不再适用于 Google chrome。 Google 不应该删除它，社区应该抗议不删除它。

Answer 1

假设您是运行 PC 上的信息亭，则无法从 Web 应用程序以编程方式执行此操作。

您必须在触控设备驱动程序设置或操作系统设置中禁用多点触控手势支持。这是一个很好的例子 - Windows 7 touch screen - disabling multi-touch gesture not working

Answer 2

我不知道这是否算作完整答案，但我没有代表发表评论。一种选择是为触摸事件设置处理程序 window.addEventListener("touchstart", touchHandler, false);然后写一个touchHandler函数

function touchHandler(event){
    if(event.touches.length > 1){
        //the event is multi-touch
        //you can then prevent the behavior
        event.preventDefault()
    }
}

这里有一些关于使用触摸事件进行开发的更多信息 https://mobiforge.com/design-development/html5-mobile-web-touch-events 您必须为不同的触摸事件设置处理程序，以防止默认的缩放行为，具体取决于浏览器。可以在此处找到列表：http://www.quirksmode.org/mobile/default.html

我不知道这是否适合你，但可能值得一试。

Answer 3

您应该能够通过将此元标记添加到您的 <head>:

来阻止用户放大

<meta name="viewport" content="width=device-width, user-scalable=no">

我的 Google Chrome Version 51.0.2704.84 (64-bit) 版本在我使用开发者工具中的触摸模拟进行测试时遵守此设置。

例如：

可通过捏合缩放的网站：Hacker News

<meta name="viewport" content="width=device-width, initial-scale=1.0">

一个不能缩放的网站：Designer News

<meta name="viewport" content="width=device-width, user-scalable=no">

我想评论一下，允许您的用户放大和缩小不应被视为“攻击”。放大对于视力不好的人（或视障人士，我不确定正确和礼貌的英语术语是什么）非常重要。

如果您禁用自然缩放行为，您应对网页的可读性负全部责任。

Answer 4

你好，这是我的建议。如果有多个输入，请尝试使其有意义，并使其平均，例如第一根手指位于 (10,20)，第二根手指位于 (20,10)，它是平均为 (15,15)。抱歉，我只能提出想法而不能提供代码，谢谢

Answer 5

这是防止放大的方法Chrome:

document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});

可能除了一些元素

document.getElementById('someelement').addEventListener('touchstart', function(e){e.stopPropagation()}, false);

Answer 6

Fanky 的回答对我有用（Kiosk 模式下的 Opera），除了我使用 touchmove 而不是 touchstart。为了让滑块正常工作，按照 Fanky 的指示在其上添加一个特定的侦听器。

Answer 7

这对我来说是最好的解决方案：

document.addEventListener('touchmove', e => {
  if (e.touches.length > 1) {  
     e.preventDefault();
  }
}, {passive: false})

Answer 8

上面的

None 在 React JS 中对我有用 7.x

hacking index.html 并添加一个侦听器似乎被 React 覆盖了。然而，下面的这个在 index.js 中起到了作用（注意，rootElement 已经存在于标准的 React 项目中）

..... 为简洁起见省略了代码

     noResize = (e) => {
    if (e.touches.length > 1) {
        e.preventDefault();
        console.debug('cancel touch')
    }
}
componentWillUnmount() {
    rootElement.removeEventListener('touchstart', this.noResize);
}
componentDidMount() {
    rootElement.addEventListener('touchstart', this.noResize)

Javascript - 如何停止缩放、多点触控输入攻击？

Javascript - How to stop pinch zoom, multi touch input attacks?

jquery

windows

google-chrome

chromium