jQuery click - 防止移动设备中的多次点击
Posted
技术标签:
【中文标题】jQuery click - 防止移动设备中的多次点击【英文标题】：jQuery click - prevent multiple clicks in mobile 【发布时间】：2016-10-09 02:52:42 【问题描述】：我正在使用 Phonegap 来构建我的 ios/android 应用程序 - 基本上是一个可以模拟笔记本电脑键盘上的几个键的遥控器。 （控制视频播放等）。
因为它是一个网页，所以我有一些图像，当单击它们时，它们会连接到我笔记本电脑上的 Java Socket 服务器。我面临的问题是，每次我单击一个按钮 - 仅一次（如暂停按钮），我看到在 java 控制台中触发了多个请求。 但这只有在我点击（触摸）手机时才会发生。当我在笔记本电脑的浏览器中尝试相同的操作时，它的行为符合预期（只有一个请求）。
我浏览了几篇帖子，一般建议是使用“unbind()”和“off()”，但似乎没有任何效果。代码 sn-p 如下。
$("#play").off().on('click',function()
//alert("Play");
jQuery.ajax(
type: "GET",
async: true,
url: 'http://'+ip+':10007/function=play?',
success: function (msg)
,
error: function (err)
);
);
我使用该警报来检查事件是否被多次触发。警报仅弹出一次，这意味着该事件仅触发一次。 所以它只是一次点击（触摸）=>一个事件=>但是多个请求！
我正在用这段代码检查服务器响应：
while(true)
Socket sock = servsock.accept();
System.out.println("Connection from: " + sock.getInetAddress());
Scanner in = new Scanner(sock.getInputStream());
PrintWriter out = new PrintWriter(sock.getOutputStream());
String request = "";
while (in.hasNext())
request = in.next( );
if (request.contains("function="))
inputLine = request.split("function=")[1];
System.out.println ("^^^^^" + inputLine);
...
当从移动设备请求时，输出会在控制台中出现三次，但当从我的笔记本电脑的浏览器发出请求时，只会出现一次。
我不明白为什么，也不知道如何预防。 有什么指点吗？
【问题讨论】：
【参考方案1】：解决此问题的另一种方法是使用单击按钮后可以设置的标志。然后您可以检查标志的值并返回 false；如果该值已设置。
// 伪代码 - 最初保持标志为假。 - 单击时，检查标志值。 -- 如果设置了标志，则返回 false； -- 如果未设置标志，则设置标志。 - 调用成功方法后，再次将值重置为 false。
这至少可以解决多次调用的问题。另一个练习是确定为什么这只是设备上的问题。
【讨论】：
【参考方案2】：使用console.log("called") 检查按钮被调用的次数。在 chrome 中查看输出在 view->Developer->javascript 控制台下。 alert("Play"); 只会运行一次。
【讨论】：
我只能在浏览器中尝试；我试过它每次点击只出现一次。但是从浏览器中我已经验证了该事件只被调用一次。在我的手机上，这种情况不止一次发生......因此发出警报。我不知道如何在我的手机中调试。 你用的是什么手机？安卓还是 iPhone？ 我使用的是 iPhone 6s 好的，你有几个选择 如果你有一个 mac（不确定它是否在 windows 上工作）通过电缆将你的 iPhone 连接到计算机，然后在 safari 中转到首选项 -> 高级并确保在菜单栏中显示开发菜单已打开。然后在开发中你会看到你的手机。【参考方案3】：我在使用 jQuery 时也有过类似的体验，其中一次单击调用了两次模态。然后我意识到问题在于我在document.ready 代码之外调用了事件。
试试这些。所以不要有
$(function()
...
);
$("#play").off().on('click',function()
...
);
试试这个方法：
$(function()
...
$("#play").off().on('click',function()
...
);
);
【讨论】：
【参考方案4】：触发一次点击事件的一种方法是使用.one() 而不是.on()。这将确保事件被触发一次。 AJAX 请求完成后，您可以再次附加 .one() 函数。
您的代码将类似于：
function processOnce()
//alert("Play");
jQuery.ajax(
type : "GET",
async : true,
url : 'http://' + ip + ':10007/function=play?',
success : function (msg)
$("#play").one('click', processOnce());
,
error : function (err)
);
$("#play").one('click', processOnce());
另一种可能的解决方案是等待 deviceready 事件。 所以在你的身体标签中添加这个：
<body onload="onBodyLoad()">
对于脚本：
<script type="text/javascript">
function onBodyLoad()
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
$(function()
// bind your elements
);
最后，您可以添加一个标志来确定之前是否发生过点击。 所以您的代码将如下所示：
var clicked = false;
$("#play").on('click', function ()
if (clicked)
return;
clicked = true;
//alert("Play");
jQuery.ajax(
type : "GET",
async : true,
url : 'http://' + ip + ':10007/function=play?',
success : function (msg)
clicked = false;
,
error : function (err)
);
);
我希望这会有所帮助。
【讨论】：
【参考方案5】：也许您已经尝试过这些解决方案，但如果您还没有尝试过，
尝试将$("#play").off('click');放在回调函数中（成功或完成）而不是~off().on('click')~。
将return false; 添加到回调中。
【讨论】：
+ 如果这些解决方案都不能解决问题，我认为最好的解决方案是仅针对移动用户使用 ontouchstart 和 ontouchend以上是关于jQuery click - 防止移动设备中的多次点击的主要内容，如果未能解决你的问题，请参考以下文章