移动设备上的问题:HTML标记不工作

Question

我有一个非常简单的web应用程序，它将div显示为菜单，然后在底部有一个"确认"；按钮通过标签<A>启动确认

<a href="Shop.asp" id="ConfirmButton" name="ConfirmButton">
Submit Order <i class="fa fa-arrow-circle-right"></i>
</a>

因此，这个应用程序(以及"确认"按钮(在我用于测试的任何浏览器(Chrome、Firefox、Edge、Opera(上都能完美工作。

在移动网络浏览器(Android和IOS网络浏览器(上，当用户点击<A>标签时，似乎没有任何动作。在Windows上一切正常，但在移动设备上什么都没发生。

<A>标签在CSS 上定义

::after, ::before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.button > a {
display: inline-block;
width: calc(50% - 0px);
padding: 12px;
background-color: #D10024;
color: #FFF;
text-align: center;
font-weight: 700;
-webkit-transition: 0.2s all;
transition: 0.2s all;
}
a:hover, a:focus {
color: #D10024;
text-decoration: none;
outline: none;
}
a:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.button { //on DIV style
visibility: visible;
}

按钮前面没有DIV。我试图拦截该按钮的onClick和onTap事件，但什么也没发生。

有没有一种方法可以识别是什么阻碍了<A>标签的执行，并检查HTML/Javascript代码在移动设备上的兼容性？

Answer 1

悬停在移动设备上是不可能的。

Try:activein CSS或onclick in Javascript。

或者通过触摸启动来模仿悬停的效果。

https://www.w3schools.com/jsref/event_touchstart.asp

此外，我为你找到了一篇文章：

https://medium.com/@mezoistvan/finally-一次性解决方案-悬停在触摸屏上-c498af39c31c