按钮在移动设备上不可用，但在 PC 上可用 bootstrap

Question

我创建了一个 bootstrap 按钮，里面有一个 link。看起来像这样：

将鼠标悬停在上面时：

这是按钮内的代码：

 <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

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

移动 clickEvents 的处理方式非常不同，第一个 "click" 或 "tap" 可能被解释为悬停而不是您正在寻找的点击。

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

Answer 2

问题可能是您使用的 onClick 事件不会在移动设备上注册（因为您没有点击 - 您点击）。

此答案解释了如何使用可在移动设备上运行的 "touchstart" 事件。

Answer 3

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

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

因为@noa-dev 和@GitPauls 建议对我有用。作为参考，我在手机上进行了测试7（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/mobile 设备。

Button not working on Mobile Devices but works on PC bootstrap