最新消息:20181230 VPS服务器已从Linode换到腾讯云香港,主题仍用朋友推荐的大前端D8

【未解决】html中如何用js把点击事件模拟成用户长按的效果

HTML crifan 1524浏览 0评论

折腾:

【未解决】微信的网页中点击按钮模拟长按图片识别二维码

期间,希望实现用户点击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

GlobalEventHandlers | MDN

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

Download jQuery | jQuery

jQuery

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

去试试:

vaidik/jquery-longpress: A jQuery plugin that makes it easy to support long press events on mobile devices and desktop borwsers.

结果试了一堆:

<code>
    &lt;script src="js/jquery-3.3.1/jquery-3.3.1.js"&gt;&lt;/script&gt;
    &lt;script src="js/jquery.longpress.js"&gt;&lt;/script&gt;

&lt;script&gt;
    $(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>
&lt;script&gt;
    $(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

javascript – How to disable context menu in Tencent / X5 / WeChat browser on Android – Stack Overflow

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把点击事件模拟成用户长按的效果

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
61 queries in 0.063 seconds, using 9.40MB memory