禁用智能手机上的长按
Posted
技术标签:
【中文标题】禁用智能手机上的长按【英文标题】：Disable long press on smartphone 【发布时间】：2014-07-26 09:07:57 【问题描述】：我已经有一个禁用长按的可用代码 但现在我不想通过 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" >
</body>
</html>
【问题讨论】：
【参考方案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！ :)
【讨论】：
以上是关于禁用智能手机上的长按的主要内容，如果未能解决你的问题，请参考以下文章