Javascript 按钮不适用于移动设备但适用于 PC 引导程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28987034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button not working on Mobile Devices but works on PC bootstrap
提问by kya
I created a bootstrap button that has a link inside. Which looks like this:
我创建了一个引导程序按钮，里面有一个链接。看起来像这样：
When you hover on it:
当你悬停在它上面时：
This is the code inside the button:
这是按钮内的代码：
<div class="s-8"><button type="button" onClick="javascript:location.href = 'administration.php';">Administration</button></div>
The logout button:
退出按钮：
<div class="s-4"><button type="button" onClick="javascript:location.href = 'logout.php';">Logout</button></div>
This button works fine on the PC(IE, SAFARI, FireFox, Chrome, Opera) browser(takes me to the administration page, but it doesn't work on the Mobile devices.
此按钮在 PC（IE、SAFARI、FireFox、Chrome、Opera）浏览器上工作正常（将我带到管理页面，但在移动设备上不起作用。
I did the same thing for the logout button, and it works fine on PC and Mobile Devices. I am now puzzled.
我对注销按钮做了同样的事情，它在 PC 和移动设备上运行良好。我现在很困惑。
回答by Git Paul
The issue may be that you're using the onClick event which won't register on a mobile device (as you don't click - you tap).
问题可能是您使用的 onClick 事件不会在移动设备上注册（因为您没有点击 - 您点击）。
This answer explains how to use the "touchstart" event which will work on a mobile.
此答案解释了如何使用可在移动设备上运行的“touchstart”事件。
回答by noa-dev
I know this might be a weird answer. But in some cases mobile clickevents dont work unless you put the style: cursor:pointer; to your button.
我知道这可能是一个奇怪的答案。但是在某些情况下，除非您放置样式，否则移动点击事件不起作用： cursor:pointer; 到你的按钮。
Mobile clickEvents are handled very differently, the first "click" or "tap" might be interpreted as a HOVER instead of the click which you are looking for.
移动点击事件的处理方式非常不同，第一次“点击”或“点击”可能会被解释为 HOVER 而不是您正在寻找的点击。
So try setting the CSS style of the button to : cursor:pointer;
所以尝试将按钮的 CSS 样式设置为： cursor:pointer;
回答by JSMorgan
unfortunately neither setting cursor:pointer;nor adding a touchstartevent listener
不幸的是既没有设置cursor:pointer;也没有添加touchstart事件监听器
$(document).ready(function() {
$('#button_id').on('click touchstart', function() {
window.location.href = "/url";
});
});
as @noa-dev and @GitPauls suggested worked for me. for reference I tested on my phone7 (ios11.4 and safari)
正如@noa-dev 和@GitPauls 建议的那样为我工作。作为参考，我在我的手机 7 上测试过（ios11.4 和 safari）
working solution:I set the z-indexof the button to a large positive number and the button now works.
工作解决方案：我将z-index按钮的设置为一个很大的正数，按钮现在可以工作了。
#button_id{
z-index: 99;
}
solution found thanks to Daniel Acreehttps://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone. I don't know if this generalizes to all iphone/mobile devices.
感谢 Daniel Acree https://foundation.zurb.com/forum/posts/3258-buttons-not-clickable-on-iphone找到了解决方案。我不知道这是否适用于所有 iphone/移动设备。
