【问题标题】：Disable long press on smartphone禁用智能手机上的长按
【发布时间】：2023-04-07 07:37:01
【问题描述】：

我已经有一个禁用长按的可用代码但现在我不想通过 ID 获取元素。我不可能为每个特定项目添加 Id。我想让它适用于名称标签中的每个 img。但是，它现在不起作用。请帮忙。

原工作线： preventLongPressMenu(document.getElementById('theimage'));

编辑的行： preventLongPressMenu(document.getElementByTagName('body img'));

整个代码：

<!DOCTYPE html>
<html>
<head>
  <script>
    function absorbEvent_(event) {
      var e = event || window.event;
      e.preventDefault && e.preventDefault();
      e.stopPropagation && e.stopPropagation();
      e.cancelBubble = true;
      e.returnValue = false;
      return false;
    }

    function preventLongPressMenu(node) {
      node.ontouchstart = absorbEvent_;
      node.ontouchmove = absorbEvent_;
      node.ontouchend = absorbEvent_;
      node.ontouchcancel = absorbEvent_;
    }

    function init() {
      preventLongPressMenu(document.getElementByTagName('body img'));
    }
  </script>
  <style>
    *:not(input):not(textarea) {
    -webkit-user-select: none; /* disable selection/Copy of UIWebView */
        -webkit-touch-callout: none; /* disable the IOS popup when long-press on a link */

    }
  </style>
</head>
<body onload="init()" id="theimage" >
  <img src="http://www.google.com/logos/arthurboyd2010-hp.jpg" width="400">
</body>
</html>

【问题讨论】：

标签： javascript html long-press

【解决方案1】：

您拼错了方法名称，并且没有传递正确的字符串。它是getElementsByTagName（注意元素上的s），您只需传递标签的名称而不是css 选择器。您还必须修改函数以循环结果，因为它将是一个节点列表

preventLongPressMenu(document.getElementsByTagName('img'));

function preventLongPressMenu(nodes) {
  for(var i=0; i<nodes.length; i++){
     nodes[i].ontouchstart = absorbEvent_;
     nodes[i].ontouchmove = absorbEvent_;
     nodes[i].ontouchend = absorbEvent_;
     nodes[i].ontouchcancel = absorbEvent_;
  }
}

如果手机浏览器支持也可以使用querySelector/querySelectorAll，可以使用css选择器来选择元素

preventLongPressMenu(document.querySelectorAll('body img'));

function preventLongPressMenu(nodes) {
  for(var i=0; i<nodes.length; i++){
     nodes[i].ontouchstart = absorbEvent_;
     nodes[i].ontouchmove = absorbEvent_;
     nodes[i].ontouchend = absorbEvent_;
     nodes[i].ontouchcancel = absorbEvent_;
  }
}

【讨论】：

【解决方案2】：

您还可以通过 JQuery 分配事件处理程序，而无需为每个节点使用 `for`：

function preventLongPressMenu(node) {
    node.on('touchstart', absorbEvent_);
    node.on('touchmove', absorbEvent_);
    node.on('touchend', absorbEvent_);
    node.on('touchcancel', absorbEvent_);
}

所以，而不是这个：

function init() {
    preventLongPressMenu(document.getElementByTagName('body img'));
}

这样做：

function init() {
    preventLongPressMenu($('body img'));
}

只是为了使用 JQuery 你必须实现它：

来自 Google CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

或来自 Microsoft CDN：“我更喜欢 Google！:)”

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

最好从两个 CDN 之一下载文件并将其作为本地文件，这样您的网站的启动加载速度会更快！

选择权在你！

对我来说，这似乎比使用 DOM 简单得多，我喜欢 JQuery！ :)

【讨论】：

您还可以通过 JQuery 分配事件处理程序，而无需为每个节点使用 for：

只是为了使用 JQuery 你必须实现它：

您还可以通过 JQuery 分配事件处理程序，而无需为每个节点使用 `for`：