按钮不在移动设备上工作,但适用于PC引导程序

时间:2015-03-11 12:48:56

标签: javascript jquery html css twitter-bootstrap-3

我创建了一个内部有链接的引导按钮。看起来像这样:

enter image description here

当你将鼠标悬停在它上面时:

enter image description here

这是按钮内的代码:

 <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和移动设备上运行良好。我现在感到困惑。

3 个答案:

答案 0 :(得分:9)

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

此答案解释了如何使用适用于手机的“touchstart”事件。

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

答案 1 :(得分:3)

我知道这可能是一个奇怪的答案。但在某些情况下,移动的clickevents不会工作,除非你把样式:cursor:pointer;到你的按钮。

移动点击事件的处理方式截然不同,第一个&#34;点击&#34;或者&#34;点击&#34;可能会被解释为HOVER,而不是您要查找的点击。

因此,请尝试将按钮的CSS样式设置为:cursor:pointer;

答案 2 :(得分:0)

很遗憾,既没有设置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 /移动设备。