按钮不在移动设备上工作,但适用于PC引导程序
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了按钮不在移动设备上工作,但适用于PC引导程序相关的知识,希望对你有一定的参考价值。
我创建了一个内部有链接的引导按钮。看起来像这样:
当你将鼠标悬停在它上面时:
这是按钮内的代码:
<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和移动设备上运行良好。我现在感到困惑。
问题可能是您正在使用不会在移动设备上注册的onClick事件(因为您没有点击 - 您点按)。
这个答案解释了如何使用可在移动设备上运行的“touchstart”事件。
https://stackoverflow.com/a/22015946/2619909
我知道这可能是一个奇怪的答案。但在某些情况下,移动的clickevents不会工作,除非你把样式:cursor:pointer;到你的按钮。
移动点击事件的处理方式非常不同,第一个“点击”或“点按”可能会被解释为HOVER而不是您要查找的点击。
因此,尝试将按钮的CSS样式设置为:cursor:pointer;
不幸的是既没有设置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 /移动设备。
以上是关于按钮不在移动设备上工作,但适用于PC引导程序的主要内容,如果未能解决你的问题,请参考以下文章
Android Webview Back按钮适用于模拟器,但不适用于设备