如何让我的按钮在移动设备上工作？答案

【问题标题】：How can I make my button work on mobile devices?如何让我的按钮在移动设备上工作？
【发布时间】：2019-01-04 11:49:59
【问题描述】：

我必须为学校的第一年考试编写一个 3 页的网站。该网站必须在任何计算机和移动设备（特别是 Nexus 5）上运行。
我在第二页上创建了一个按钮，每次单击它时都会给出随机句子。它在计算机上完美运行，但每次我将我的网站放在移动设备（模拟器等）上时，按钮都不起作用。我在网上看到很多人遇到同样的问题，但没有一个解决方案有效或与我的问题相对应。

这是我的按钮代码；

var news = [
  'omg i need help',
  'haaaaaaaaa',
  'skdkskfsjize',
  'I ll fail my exams so bad',
  'blablabla',
]

function newNews() {
  var randomNumber = Math.floor(Math.random() * (news.length));
  document.getElementById('newsDisplay').innerHTML = news[randomNumber]
}

.boite {
  overflow: hidden;
  position: fixed;
  background-position: right;
  float: right;
  font-size: 14px;
  line-height: 13px;
  width: 200px;
  display: inline-block;
  vertical-align: right;
  margin-left: -806px;
  margin-top: 43px;
  background-color: darkolivegreen;
  border-bottom-style: groove;
  border-width: thick;
}

<button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button>
<div id="newsDisplay" class="boite"></div>

感谢您的宝贵时间

【问题讨论】：

看了一下，代码上好像没有什么奇怪的地方。
问题是<div>的CSS而不是按钮
尝试不使用 .boite 类并检查问题是否仍然存在。
您的 margin-left: -806px; 行可能将 div 放置在视口之外，使其看起来像什么都没发生。
尝试使用addEventListener() 而不是过时的on* 事件属性

标签： javascript jquery html css button

【解决方案1】：

将 margin-left 值替换为较小的值或百分比而不是 CSS 中的像素，以防止 div 在移动屏幕上显示不出来。

另外，为您的按钮添加一个唯一的 id 并在 JavaScript 本身中为其添加事件侦听器，而不是像这样内联编写脚本：

/* JavaScript */
var btn = document.getElementById("newsBtn");

var news = ['a','b','c','d','e',];

function newNews (e) {
    e.preventDefault();
    var randomNumber = Math.floor(Math.random()*(news.length));
    document.getElementById('newsDisplay').innerHTML = news[randomNumber];
}

btn.addEventListener("click", newNews);
btn.addEventListener("touchstart", newNews);

<!-- HTML -->
<button id="newsBtn" type="button">News</button>
<div id="newsDisplay" class= "boite"></div>

注意e.preventDefault 用于防止两个事件侦听器在某些移动设备上被触发同时开火。

查看此article 处理事件，以更深入地了解如何在单个元素上处理这两个事件。

【讨论】：

【解决方案2】：

所以我稍微简化了你的脚本。见Jsfiddle

主要是css出了问题

margin-left: -806px;

Margin-left 确保它落在屏幕之外。还通过移动调试对其进行了测试，效果很好。

【讨论】：

【解决方案3】：

删除 margin-left 属性 - 它将 div 元素置于屏幕外 - 您可能还想将 background-color 更改为更明显的内容！

var news = [
  'omg i need help',
  'haaaaaaaaa',
  'skdkskfsjize',
  'I ll fail my exams so bad',
  'blablabla',
]

function newNews() {
  var randomNumber = Math.floor(Math.random() * (news.length));
  document.getElementById('newsDisplay').innerHTML = news[randomNumber]
}

.boite {
  overflow: hidden;
  position: fixed;
  background-position: right;
  float: right;
  font-size: 14px;
  line-height: 13px;
  width: 200px;
  display: inline-block;
  vertical-align: right;
  margin-top: 43px;
  background-color: darkolivegreen;
  border-bottom-style: groove;
  border-width: thick;
}

<button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button>
<div id="newsDisplay" class="boite"></div>

【讨论】：

@MarineCavaillès;在您的问题中，您说您的代码在计算机上运行良好，但显然不能，因此很难说可能存在错误。
对不起，它可以在电脑上运行，但不能在移动设备上运行，但感谢大家的回答，我找到了解决方案！

【解决方案4】：

左边距似乎是这里的问题。删除一切都会正常工作。

检查一下。

var news = [
  'omg i need help',
  'haaaaaaaaa',
  'skdkskfsjize',
  'I ll fail my exams so bad',
  'blablabla',
]

function newNews() {
  var randomNumber = Math.floor(Math.random() * (news.length));
  document.getElementById('newsDisplay').innerHTML = news[randomNumber]
}

.boite {
  overflow: hidden;
  position: fixed;
  background-position: right;
  float: right;
  font-size: 14px;
  line-height: 13px;
  width: 200px;
  display: inline-block;
  vertical-align: right;
  /*margin-left: -806px;*/
  margin-top: 43px;
  background-color: darkolivegreen;
  border-bottom-style: groove;
  border-width: thick;
}

<button type="button" style="height: auto; width: 200px;" onClick="newNews();" onTouch="newNews();">News</button>
<div id="newsDisplay" class="boite"></div>

【讨论】：