按钮不适用于移动设备，但适用于 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: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 Acreehttps://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone。我不知道这是否适用于所有 iphone/移动设备。

Answer 3

我知道这可能是一个奇怪的答案。但在某些情况下，除非您放置以下样式，否则移动点击事件不起作用： cursor:pointer;到您的按钮。

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

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