html按钮在移动设备中不起作用答案

【问题标题】：html button not working in mobile devicehtml按钮在移动设备中不起作用
【发布时间】：2018-05-29 10:16:34
【问题描述】：

我正在开发一个 Web 应用程序。

在HTML 页面之一中，我有以下代码sn-p：

<div class="div2">    
<button id="buttonid" type="button" class="btn-submit pull-right" onclick="alert()">BOOK NOW</button>
<div>

此代码在 PC 浏览器中运行良好。但是当我在移动设备的浏览器中尝试它时，一个按钮是不可点击的。同一页面中还有许多按钮，但它们工作正常。我非常努力地在网上寻找解决方案，但没有一个奏效。

【问题讨论】：

检查其他 div 元素是否与移动设备中的按钮重叠，如果您使用的是响应式 css，则应该可以工作。
感谢@AntonyMN。问题在于 div 元素的样式。

标签： javascript jquery html browser

【解决方案1】：

几个观察： - 不知道为什么你在按钮周围添加了一个 div 包装器。尝试删除 div 包装 - 需要检查您的 html 标记，因为您正尝试在移动设备上查看 html 页面，如果元素结构不正确，则其中一个元素很可能与按钮重叠。因此，按钮的点击事件没有被触发，而是它可能试图触发重叠元素的点击事件

【讨论】：

谢谢。问题在于 div 元素的样式。
对我来说也一样，另一个元素重叠

【解决方案2】：

标签定义了一个可点击的按钮。

您可以在元素内放置内容，例如文本或图像。这是此元素与使用该元素创建的按钮之间的区别。

提示：始终指定元素的类型属性。不同的浏览器对元素使用不同的默认类型。

一个可点击的按钮标记如下：

<button type="button">Click Me!</button>

否则

<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg>
  Add to favorites
</button>

【讨论】：

【解决方案3】：

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

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

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

看这里:) Button not working on Mobile Devices but works on PC bootstrap

【讨论】：