zoukankan      html  css  js  c++  java
  • ios下按钮click事件点击穿透问题

    和app进行混合开发的时候,一个页面使用h5写的,按钮上绑定click事件会触发下面图片上的a链接导致跳转,页面如图

     顶部是一个banner,分vr、视频、图片三部分,红框处的三个nav按钮绑定click事件使banner滚动到响应的部分,banner上有a链接用以跳转详情,nav按钮上绑定事件如下:

    $(document).on("click","#banner-navBox .nav-btn",function(e){
        ...
    });            

    但是点击nav按钮的时候看不到banner滚动而是直接触发下面banner上的a链接发生跳转。

    查阅资料发现移动端click事件的流程:touchstart -> touchend -> tap -> click。

    touchend首先触发tap然后等待300ms后触发click。

    想的是nav按钮绑定click事件会先触发touchend 事件,而移动端a链接的触发机制就是touchend ,所以就导致先发生了页面跳转。所以nav按钮绑定的时间改为touchend并阻止默认行为后完美解决,如下:

    $(document).on("touchend","#banner-navBox .nav-btn",function(e){
        e.preventDefault();
        ...            
    }
  • 相关阅读:
    [NOI2021] 路径交点
    CF1188D Make Equal
    CF1349F1 Slime and Sequences
    CF1067D Computer Game
    Dcat Admin安装
    PHP 中提示undefined index如何解决(多种方法)
    Git 常用命令大全
    项目维护环境部署
    bootstrap-table
    bootstrap-datetimepicker
  • 原文地址:https://www.cnblogs.com/changzz/p/11994426.html
Copyright © 2011-2022 走看看