英文:
jQuery conflict between touchstart/touchend with normal click in mobile screen
问题
以下是翻译好的部分：
"The click normal on image is not fired, I have a conflict with the touchstart/touchend commands in mobile device android."
图片上的普通点击没有触发，我在移动设备 Android 上的 touchstart/touchend 命令中存在冲突。
"The delay function is for show to alert after 5 seconds. But cancel if it does not reach 5 seconds."
延迟函数是为了在 5 秒后显示警报。但如果不满足 5 秒条件就取消。
"Touchstart start function and touchend clear setTimeout for cancel function."
Touchstart 启动函数，touchend 清除 setTimeout 以取消函数。
"The normal click over image not fired."
在图像上的普通点击没有触发。
"What is the error?"
有什么错误？
希望这些翻译对你有帮助。
英文:
The click normal on image is not fired, I have a conflict with the touchstart/touchend commands in mobile device android.
The delay function is for show to alert after 5 seconds. But cancel if it does not reach 5 seconds.
Touchstart start function and touchend clear setTimeout for cancel function.
The normal click over image not fired.
What is the error?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let myTimeout;
var mousedownFired = false;
$(document).on("touchstart", "figure img", (e) => { // Start setTimeout with Delay
e.preventDefault();
mousedownFired = true;
myTimeout = setTimeout(function() {
console.log("PRESS WITH DELAY");
}, 5000);
});
$(document).on("touchend", "figure img", (e) => { // Cancel setTimeout
e.preventDefault();
clearTimeout(myTimeout);
console.log("STOPING!");
//e.stoppropagation();
});
$(document).on("click", "figure img", (e) => {
e.stopPropagation();
e.preventDefault();
if (mousedownFired) {
mousedownFired = false;
console.log("CLICK IMG NORMAL");
return;
}
});
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section>
<figure>
<img id="demo" src="https://picsum.photos/536/354" />
</figure>
</section>
<!-- end snippet -->
答案1
得分: -1
这就是指针事件的用途 - 为了拥有适用于鼠标和触摸指针的单一代码库。
let myTimeout;
const handleDown = (evt) => {
evt.preventDefault();
console.log("PRESSED");
myTimeout = setTimeout(function() {
console.log("PRESSED WITH DELAY");
}, 1000);
};
const handleUp = (evt) => {
clearTimeout(myTimeout);
console.log("STOPPED!");
};
$(document)
.on("pointerdown", "figure img", handleDown)
.on("pointerup", "figure img", handleUp);
<figure>
<img src="https://picsum.photos/536/354" />
</figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
PS:
除非出于调试目的，永远不要使用Event.stopPropagation()。随时可以为应用程序（或第三方脚本）注册发生在其环境文档中的事件 - 没有例外，以便正确响应和操作。仅举一个例子，考虑一个用于模态框、自定义选择框、弹出框等的脚本。如果您的脚本使用了stopPropagation()，那么模态框将无法如预期般关闭。
英文:
That's what Pointer Events are made for - To have a single code-base for both mouse and touch pointers.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let myTimeout;
const handleDown = (evt) => {
evt.preventDefault();
console.log("PRESSED");
myTimeout = setTimeout(function() {
console.log("PRESSED WITH DELAY");
}, 1000);
};
const handleUp = (evt) => {
clearTimeout(myTimeout);
console.log("STOPPED!");
};
$(document)
.on("pointerdown", "figure img", handleDown)
.on("pointerup", "figure img", handleUp);
<!-- language: lang-html -->
<figure>
<img src="https://picsum.photos/536/354" />
</figure>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- end snippet -->
PS:
Never use (unless for debugging purposes) Event.stopPropagation(). At any time an app (or third-party scripts) should be able to register events that occur in its environment document - without exceptions, in order to respond and act properly. Imagine just for example a script for modals, or for custom select boxes, popups... If a script of yours used stopPropagation() the modals would not close as expected.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论