JQuery $(document).on( "click" ) 在移动设备上

Question

我已经在网上做了一些研究，但我找不到任何解决问题的方法：

我有一个使用JQuery和bootstrap的网络应用程序，在桌面上可以正常工作，但当我在移动设备上尝试它时(在安卓系统上，我尝试过Chrome和Brave(，但点击按钮就无法工作，但要触发它，需要长按，直到动画完成

这里的前端部分和JQuery代码：

$(document).on("click ", "#triggerCena", function(e) {
e.preventDefault();
$('#dettaglioCena').slideToggle("fast", function() {
delay = 0;
$('#dettaglioCena .cibo').each(function() {
if (!$(this).hasClass('animate__animated animate__bounceInLeft')) {
delay += 0.02;
$(this).css("animation-delay", delay + "s");
$(this).addClass('animate__animated animate__bounceInLeft');
$(this).css("visibility", "visible");
}
});
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row animate__animated animate__zoomInDown" style="margin:0px;margin-top:15px;margin-bottom:15px;animation-delay:1s;">
<div class="col-2">
<img class="mx-auto d-block rounded" width="62" height="50" src="images/pictures/img_community/cena.jpg">
</div>
<div class="col-7">
<h1 style="color:white;margin-left:15px;font-size:20px;">Cena</h1>
</div>
<div class="col-1">
</div>
<div class="col-1" style="margin-right:10px;">
<i class="fa fa-plus addMeal" style="color:white;font-size:20px;" data-toggle="modal" value="3" data-target="#modalAlimenti"></i>
</div>
</div>
<div class="row bg-light-grey animate__animated animate__zoomInDown" style="margin:0px;margin-bottom:0px;animation-delay:1s;">
<div class="col-1">
</div>
<div class="col-6">
<i style="color:black;">4 Voci</i>
</div>
<div class="col-3">
</div>
<div class="col-1">
<a class="fa fa-angle-down" style="color:black;" id="triggerCena" role="button"></a>
</div>
</div>
<div class="collapse" id="dettaglioCena" style="display: none;">
<div class="row bg-light-grey" id="175" style="margin:0px;"></div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="176" style="margin: 0px; visibility: visible; animation-delay: 0.02s;">
<div class="col-4">
Grano saraceno </div>
<div class="col-3">
50 g </div>
<div class="col-3">
171 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="176"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="177" style="margin: 0px; visibility: visible; animation-delay: 0.04s;">
<div class="col-4">
Coniglio </div>
<div class="col-3">
150 g </div>
<div class="col-3">
295 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="177"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="178" style="margin: 0px; visibility: visible; animation-delay: 0.06s;">
<div class="col-4">
Broccoli </div>
<div class="col-3">
300 g </div>
<div class="col-3">
102 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="178"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="179" style="margin: 0px; visibility: visible; animation-delay: 0.08s;">
<div class="col-4">
Olio di oliva </div>
<div class="col-3">
30 ml </div>
<div class="col-3">
265 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="179"></i></div>
</div>
</div>

我也在使用Animate.css制作动画。

我已经尝试过增加触球开始和触球结束，但似乎没有什么能改变这种行为。

非常感谢任何帮助

Answer 1

每次点击都会有延迟，因为可能有人没有真正点击，但这是滑动的开始。这就是为什么会有延迟，我想这就是你在说的？

请参见此处：https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away