按钮在移动设备上不起作用，但在PC引导上起作用

Question

我创建了一个引导按钮，里面有一个链接。它看起来像这样：

​

​

当你悬停在上面的时候：

​

​

这是按钮内部的代码：

 <div class="s-8"><button type="button" onClick="javascript:location.href = 'administration.php';">Administration</button></div>

注销按钮：

<div class="s-4"><button type="button" onClick="javascript:location.href = 'logout.php';">Logout</button></div>

此按钮在PC(IE、SAFARI、FireFox、Chrome、Opera)浏览器上工作正常(将我带到管理页面，但在移动设备上不起作用。

我对注销按钮做了同样的事情，它在PC和移动设备上工作得很好。我现在很困惑。

Answer 1

问题可能是你正在使用onClick事件，它不会在移动设备上注册(因为你不点击-你点击)。

这个答案解释了如何使用"touchstart“事件，它将在移动设备上工作。

https://stackoverflow.com/a/22015946/2619909

Answer 2

我知道这可能是个奇怪的答案。但在某些情况下，移动点击事件不起作用，除非你把样式:cursor:指针；放到你的按钮上。

移动clickEvents的处理方式非常不同，第一次“点击”或“点击”可能会被解释为悬停，而不是你正在寻找的点击。

所以尝试将按钮的CSS样式设置为: cursor:pointer；

Answer 3

遗憾的是，既没有设置cursor:pointer;，也没有添加touchstart事件侦听器

$(document).ready(function() {
  $('#button_id').on('click touchstart', function() {
    window.location.href = "/url";
  });
});

正如@noa-dev和@GitPauls所建议的那样，对我很有效。作为参考，我在我的phone7 (ios11.4和safari)上进行了测试。

工作解决方案：我将按钮的z-index设置为一个很大的正数，按钮现在可以工作了。

#button_id{
  z-index: 99;
}

多亏了Daniel Acree https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone，才找到了解决方案。我不知道这是否适用于所有的iphone/移动设备。