折腾:
期间,希望实现用户点击click事件,变成,模拟长按事件。
html js click emulate long press
html js click simulate long press
javascript – Longpress simulation with onmousedown but also has onclick – Stack Overflow
Simulate a click on ‘a’ element using javascript/jquery – Stack Overflow
android – Simulate Long Press in Javascript – Stack Overflow
How to simulate a click with JavaScript? – Stack Overflow
android – Simulate Long Press in Javascript – Stack Overflow
Simulate a longtouch via click event? : learnjavascript
How to simulate a click event with vanilla JavaScript | Go Make Things
试试能否用jquery去:
<code>$('#myElement').trigger("click") </code>
trigger 长按
先去下载一个jquery
jquery download
jQuery Core – All Versions | jQuery CDN
jquery long press mobile
triggers – How to detect a long press on a div in Jquery? – Stack Overflow
javascript – Longpress / longclick event support / plugin in jQuery – Stack Overflow
去试试:
结果试了一堆:
<code> <script src="js/jquery-3.3.1/jquery-3.3.1.js"></script> <script src="js/jquery.longpress.js"></script> <script> $(document).ready(function(){ console.log("main document ready !") var curHtml = $('#wechatQRCode').html() console.log("curHtml=", curHtml) // $('#wechatQRCode').trigger("select") $( "#wechatQrImg" ).bind( "taphold", tapholdWechatQrImg ); $("#wechatQrImg").mousedown(function(){ alert("wechatQrImg mousedown") }) // $("#wechatQrImg").longclick(750, function(){ // alert("wechatQrImg longclick 750") // }) $("#wechatQrImg").click(function(){ alert("wechatQrImg click") }) $('#wechatQrImg').longpress(function() { // longpress callback alert('wechatQrImg longpress') }) }); function tapholdWechatQrImg(e) { alert("tapholdWechatQrImg:", e) $("#curVersion").html("tapholdWechatQrImg") } document.querySelector('#SCANQR').onclick = function () { // alert("识别按钮"); console.log("click detected") alert("click detected") // $('#wechatQRCode').trigger("focus") console.log($('#SCANQR')) // $('#SCANQR').trigger("click") // $('#wechatQrImg').mousedown(function(){ // alert("wechatQrImg mousedown") // setTimeout(function(){ // alert("wechatQrImg mouseup") // $('#wechatQrImg').mouseup(); // }, 5000); // }); $('#wechatQrImg').touchstart(function(){ alert("wechatQrImg touchstart") setTimeout(function(){ alert("wechatQrImg touchend") $('#wechatQrImg').touchend(); }, 5000); }); }; </code>
发现:
但是安卓手机中的微信,是检测不出来的
不过,又试了试,结果又能检测出来了:
但是如何模拟长按,还要去搞清楚,否则现在无法触发 微信弹框和选项了
emulate wechat longpress
emulate wechat browser longpress
web – How to simulate a page opened in Wechat? – Stack Overflow
模拟 微信浏览器 长按
javascript – 微信浏览器如何阻止长按菜单? – SegmentFault 思否
js模拟长按事件的实现方式 – niuhongxia的个人空间 – 开源中国
android webview下纯JS实现长按 – dryZeng的专栏 – CSDN博客
然后用:
<code> <script> $(document).ready(function(){ console.log("main document ready !") var curHtml = $('#wechatQRCode').html() console.log("curHtml=", curHtml) // $('#wechatQRCode').trigger("select") // $( "#wechatQrImg" ).bind( "taphold", tapholdWechatQrImg ); // $("#wechatQrImg").mousedown(function(){ // alert("wechatQrImg mousedown") // }) // $("#wechatQrImg").longclick(750, function(){ // alert("wechatQrImg longclick 750") // }) // $("#wechatQrImg").click(function(){ // alert("wechatQrImg click") // }) // $('#wechatQrImg').longpress(function() { // // longpress callback // alert('wechatQrImg longpress') // }) }); // function tapholdWechatQrImg(e) { // alert("tapholdWechatQrImg:", e) // $("#curVersion").html("tapholdWechatQrImg") // } document.querySelector('#SCANQR').onclick = function () { // alert("识别按钮"); console.log("click detected") alert("click detected") // $('#wechatQRCode').trigger("focus") console.log($('#SCANQR')) // $('#SCANQR').trigger("click") // $('#wechatQrImg').trigger("longpress") // $('#wechatQrImg').mousedown(function(){ // alert("wechatQrImg mousedown") // setTimeout(function(){ // alert("wechatQrImg mouseup") // $('#wechatQrImg').mouseup(); // }, 5000); // }); // $('#wechatQrImg').touchstart(function(){ // alert("wechatQrImg touchstart") // setTimeout(function(){ // alert("wechatQrImg touchend") // $('#wechatQrImg').touchend(); // }, 5000); // }); $('#wechatQrImg').trigger("touchstart") setTimeout( function(){ alert("wechatQrImg after 5000 touchend") $('#wechatQrImg').trigger("touchend") }, 2000 ) </code>
是可以回调到touchstart和touchend,但是并没有触发 弹出框菜单:
微信浏览器 long press event
手机长按触发事件(网页端) – 何晓龙的博客 – CSDN博客
也是类似于jquery.longpress.js,是可以加自己的longpress事件
但是还是无法模拟微信中的长按,使得弹框出来
wechat browser long press
Hype for WeChat – extract QR Code – background-image – Elements – Tumult Forums
html – How do I link to wechat from a webpage? – Stack Overflow
所以现在结论是:
长按的话,如果加上自己的长按事件,比如:
<code> $('#wechatQrImg').longpress(function() { alert('wechatQrImg longpress') }) </code>
则是可以alert弹框的
-》但是就屏蔽了微信的弹框(菜单)了。
然后用:
<code> // $('#wechatQrDiv').bind("touchend", function() { // alert('wechatQrDiv touchend') // }) // $('#wechatQrDiv').bind("taphold", function() { // alert('wechatQrDiv taphold') // }) $('#wechatQrImg').bind("touchend", function() { alert('wechatQrImg touchend') }) // $('#wechatQrImg').bind("taphold", function() { // alert('wechatQrImg taphold') // }) </code>
虽然可以触发wechatQrImg的touchend
但是还是无法捕获到微信内置浏览器的长按
所以目前结论是:
微信浏览器内部有个自己的长按的事件,触发后弹框显示菜单
但是这个长按事件,是无法捕获的
而自己要是实现了长按事件后,则会屏蔽掉微信的长按,导致无法弹框
所以,除非微信浏览器本身开放了相关端口,否则是拿不到微信浏览器的长按,也无法模拟出来其长按的效果的。
转载请注明:在路上 » 【未解决】html中如何用js把点击事件模拟成用户长按的效果