美文网首页
vue部分安卓手机无法触发touchend

vue部分安卓手机无法触发touchend

作者: _相信未来_ | 来源:发表于2021-09-28 16:59 被阅读0次

    突然发现一个特殊情况,某些安卓手机无法触发touchend事件,查资料后给出如下解决方案
    第一种方案:
    在监听touchstart或者touchmove事件的函数里,阻止事件的默认行为event.preventDefault(),那么到touchend就能正常触发

    <div class="btn" @touchstart="touchstart" @touchend="touchend"></div>
      touchend(event) {
      //松开按键
      event.preventDefault();
      }
    

    第二种方案:
    同时绑定touchcancel和touchend事件,这样在安卓上就能通过触发touchcancel来重新展示我们的按钮。

    <div class="btn" @touchstart="touchstart" @touchend="touchend" @touchend="touchcancel"></div>
    touchend(event) { 
    //松开按键
    }
    

    第三种方案:
    阻止任何父事件的 event.stopPropagation()行为,那么到touchend就能正常触发。

    <div class="btn" @touchstart="touchstart" @touchend="touchend"></div>
      touchend(event) {
      //松开按键
      //阻止任何父事件处理程序被执行
      event.stopPropagation();
      }
    

    第四种方案:
    问题:
    如果触发了 touchmove, touchend 就不会被触发了, 而且 touchmove 没有持续触发。
    解决方法:
    只要在 touchstart 的时候调用下 event.preventDefault(); 即可让其他事件都正常被触发了。

    $(document).on("touchstart",".btn-highlight",function(){
            $(this).addClass("hover");
        }).on("touchmove",".btn-highlight",function(event){
            event.preventDefault();
        }).on("touchcancel touchend",".btn-highlight",function(event){
            $(this).removeClass("hover");
        });
    

    相关文章

      网友评论

          本文标题:vue部分安卓手机无法触发touchend

          本文链接:https://www.haomeiwen.com/subject/urrrnltx.html