【问题标题】:Button does not work on some mobile devices (eg iPhone6, Androids)按钮在某些移动设备上不起作用(例如 iPhone6、Android)
【发布时间】:2015-09-28 07:11:25
【问题描述】:

这是我在这里的第一个问题,有人建议我把这个话题放在这里。

我有一个基于 AURA (PI-) 主题的响应式网站。对于 xs2 断点,我确实在主页上展示了另一个幻灯片,我在其中放置了一个按钮作为号召性用语(其他按钮类型也不起作用)

在 iPhone4 和 5 等较旧的智能手机上,它可以正常工作。但在较新的设备上它不是。

请查看此test-page

您还可以在模拟此类设备的 chrome 浏览器中进行检查。那里点击“探索”按钮也不起作用。

欢迎任何帮助,我非常感谢。

谢谢!

【问题讨论】:

  • 你能把它缩小到你可以展示给我们的代码库吗?
  • 抱歉,我想显示的代码太多了。为了减少它,它是一个使用“Slider Revolution Responsive jQuery Plugin”的主题。点击测试页面链接时,您可以查看并检查源代码。

标签: mobile imagebutton responsive-slides


【解决方案1】:

这很简单。你得到了一个带有滑动处理程序的幻灯片,它可能为滑动和单击/点击设置了 preventDefault。如果我尝试在测试设备(android 4)上单击它,它也不起作用。但是如果我按住它然后按打开它确实有效。所以这不是关于 z-index (常见错误),而是关于 preventDefault。这意味着您必须使用 javascript 将链接分配给幻灯片中的按钮。

编辑: 要使用 javascript(仅 javascript,没有 jquery 或任何其他库)为元素分配链接,只需将类似的内容放入脚本标记或 javascript 文件中:

document.getElementById("ID-of-your-button").addEventListener("click", function(){window.location.href = "http://link-desti.nation"});

这应该可以正常工作。如果还有其他问题,请在下面写评论。我会尽快回复。

P.S.:很抱歉编辑晚了,最近几天我在“立即执行”级别上做了很多有趣的工作。

【讨论】:

  • 感谢您的解释。这有助于理解问题。您能否进一步解释“使用 javascript 将链接分配给按钮”是什么意思?
猜你喜欢
  • 2019-04-26
  • 2019-03-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-02-22
  • 2014-06-27
相关资源
最近更新 更多