Question

我必须为我的学校的一年级考试编写一个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>

谢谢您的时间

Answer 1

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

此外，在JavaScript本身中为按钮添加唯一的ID，并向其添加事件监听器，而不是像这样内联地编写脚本：

/* 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>

NB e.preventDefault用于防止在某些特定的移动设备上触发两个事件侦听器，这些移动设备在触摸元素时会模拟鼠标点击，或者在触屏笔记本电脑等设备上都触发事件会同时触发。

请选中article，以处理事件，以更深入地说明如何在单个元素上处理两个事件。

Answer 2

删除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>

Answer 3

所以我简化了您的脚本。参见Jsfiddle

最出错的是CSS

margin-left: -806px;

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

Answer 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>

如何使我的按钮在移动设备上工作？

4 个答案: