在ios上长按会触发click事件

粉忆天魔黑兔

近期有个这样的功能需求，长按某个元素在其上面弹出一个菜单。
当我使用 touchstart、touchmove、touchend实现该功能后安卓上使用一切正常。
到ios上进行测试时，发现长按后依然会触发click事件。
于是排除所有运行环境插件之类可能带来的影响，写一个最原始的html页面写上onclick事件，到ios上测试该问题，长按onclick的元素，click事件依然触发，问题依旧存在，这个官方能修复一下吗？

技术咨询-F

已反馈给iOS技术帮您解答

技术咨询-Kenny

用了 tapmode？如果没用 tapmode，你可以在微信、系统浏览器里面看下什么效果。

全职开发❾⓿❸❻❹❻❺❺❼

https://www**.**/article-details/pmaqp6kbviab.html 看看是不是你要的

粉忆天魔黑兔

技术咨询-Kenny 发表于 2021-6-25 15:03
用了 tapmode？如果没用 tapmode，你可以在微信、系统浏览器里面看下什么效果。 ...

没有使用tapmode 项目里使用的是vue的@click
后面为了验证问题写的纯粹的onclick事件

粉忆天魔黑兔

微链科技发表于 2021-6-25 16:34
https://www**.**/article-details/pmaqp6kbviab.html 看看是不是你要的

功能我已经实现了，方式与您类似。就是觉着不应该长按还能触发ckick的事件

技术咨询-Kenny

粉忆天魔黑兔发表于 2021-6-25 17:07
没有使用tapmode 项目里使用的是vue的@click
后面为了验证问题写的纯粹的onclick事件 ...

触发长按后加 e.preventDefault() 了吗？

粉忆天魔黑兔

技术咨询-Kenny 发表于 2021-6-25 17:45
触发长按后加 e.preventDefault() 了吗？

加过，触发长按之后加了这个也依然会触发click，触发长按后先执行的e.preventDefault() 再执行我本身的业务，因此不是我的业务导致其无效
但是触发长按之前加这个能有效阻止click的触发

技术咨询-Kenny

粉忆天魔黑兔发表于 2021-6-25 18:15
加过，触发长按之后加了这个也依然会触发click，触发长按后先执行的e.preventDefault() 再执行我本身的业 ...

把你测试的页面发出来。

粉忆天魔黑兔

技术咨询-Kenny 发表于 2021-6-25 18:42
把你测试的页面发出来。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<style type="text/css">
html,body{
      height: 100%;
}
#wrap{
      height: 100%;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-flex-flow: column;
            flex-flow: column;
}
#header{
      text-align: center; background-color: #81a9c3; color: #fff;
      width: 100%;
}
#header h1{
      font-size: 20px; height: 44px; line-height: 44px; margin: 0em; color: #fff;
}
#main{
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      flex: 1;
}
#footer{
      height: 30px; line-height: 30px;
      background-color: #81a9c3;
      width: 100%;
      text-align: center;
}
#footer h5{
      color: white;
}
.flex-con{
   overflow: auto
}

.testbtn{
      height: 200px;
      line-height: 200px;
      text-align: center;
      margin: 30px;
      border:solid #ddd 1px;
      font-size: 2rem;
}
</style>
</head>
<body>
<div id="wrap">
      <div id="header">
         <h1>APICloud</h1>
      </div>
      <div id="main" class="flex-con">
         <div
         class="testbtn"
         onclick="document.getElementById('print1').innerHTML='触发点击'"
         ontouchstart="touchstart(event)"
         ontouchmove="touchmove()"
         ontouchend="touchend()"
         >Click or touch</div>
         <div id="print1"></div>
         <div id="print"></div>
      </div>

      <div id="footer">
         <h5>Copyright ©<span id="year"></span> </h5>
      </div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
apiready = function(){
      console.log("Hello APICloud");

      var header = $api.byId('header');
      //适配iOS 7+，Android 4.4+状态栏
      $api.fixStatusBar(header);

      var headerPos = $api.offset(header);
      var main = $api.byId('main');
      var mainPos = $api.offset(main);
      // api.openFrame({
      //    name: 'main',
      //    url: 'html/main.html',
      //    bounces: true,
      //    rect: {
      //       x: 0,
      //       y: headerPos.h,
      //       w: 'auto',
      //       h: mainPos.h
      //    }
      // });

      var year = $api.byId('year');
      year.innerHTML = new Date().getFullYear();

};

let t=0;
var touchstart=(e)=>{
      clearTimeout(t);
      t=setTimeout(()=>{
         e.preventDefault();
         document.getElementById('print').innerHTML='触发长按'
      }, 600);
}
var touchmove=()=>{
      clearTimeout(t);
}
var touchend=()=>{
      clearTimeout(t);
}
</script>
</html>

[superwebview] 在ios上长按会触发click事件