在移动设备上无法运行Javascript，但在桌面端可以。

Question

这段代码在桌面浏览器上能运行，但是我在iOS手机上不能。我尝试添加'touchstart'并查看了这个帖子的解决方案，以检查其他人是如何让它工作的，但仍然无法工作。还有其他建议吗？ 我还尝试添加e.preventDefault() - 并将e添加到function（），但这也不起作用。

我已经尝试过：

 $('body').on('click touchstart', '.myContainer', function() {
     $(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
 });

编辑： 似乎还有其他问题，我将代码尽可能通用化，但它在iOS上不触发事件，但在我的Chrome模拟器中工作：

$(document).on('click touchstart', 'body', function() {
      alert('hi');
    });

附加更新:

我已将以下代码添加到我的script.js文件中:

$('body').css('display', 'none');

如预期，我的桌面浏览器在本地和Heroku上都会出现空白屏幕，但是当我在移动设备上测试时，屏幕不会变空白。看起来JavaScript没有正常工作。

附图：

- Ron I

Answer 1

答案：在iOS Safari浏览器上无法正常工作的原因是因为我在JS页面中使用了ES6，特别是“let”关键字，[目前不支持][1]。将代码改为ES5后问题消失了。

[1]: https://kangax.github.io/compat-table/es6/#ios_saf_mob_9.2

$('body').on('click', '.dashboard_leftNav_category a', function() {
      var link = $(this).attr('showSection'); //changed from let link
      var show = $('[section="'+link+'"]');
      $('[section]').hide();
      $('body').find(show).fadeIn();
      $('html,body').scrollTop(0);
    });

- Ron I

---

去掉 let 之后问题解决了。 - cmac

这个问题在2016年就已经得到了回答。截至2023年3月，iOS Safari和Android Chrome都支持ES6。https://caniuse.com/?search=es6 - OXiGEN

Answer 2

您有两个选项：

1. 重置您的移动浏览器历史记录，因为您的浏览器缓存读取了旧的源文件。
2. 在桌面上更改源文件的名称，然后再次刷新页面。

- Ahmad Reza Azimi

Answer 3

这会对你有所帮助。与将其绑定到body元素不同，将事件绑定到文档上。

$(document).on('click touchstart', '.myContainer', function() {

      $(this).toggleClass('myContainer-unselected').toggleClass('myContainer-selected');
    });

也可以尝试将以下样式添加到myContainer类中。

cursor : pointer;

- Krishnakumar_Muraleedharan

---

谢谢。我仔细检查了一下我的样式，确保添加了cursor:pointer，并将其更改为document。但它仍然没有起作用，所以我检查了浏览器控制台，发现它触发了两个事件。我添加了e.stopImmediatePropagation()，但它仍然触发了两个事件。我想把它从'click touchstart'切换到只有click，现在它只触发一个事件，但在移动设备上仍然无法工作。然后我尝试了'touchstart'而没有'click'，在移动设备上也无法工作。它在我的chrome移动模拟器中可以工作，但在我的iphone上无法工作。 - Ron I

Answer 4

将 e.preventDefault(); 放在你的 JavaScript 函数内部。

- Simonsoft177

Answer 5

为了测试JS是否已经加载，可以在任何加载在页面上的JS文件的第一行中添加一个简单的alert('hello');。如果警报没有显示出来，请检查浏览器的设置，以查看该站点是否启用了JS。

如果警报确实显示出来，但页面仍然无法加载预期的JS，则很可能是你的代码中的一个或多个功能在该浏览器/设备上不受支持。具有所有功能列表的兼容性函数可以提供有用的反馈。某些功能属于window，其他功能属于navigator。对于实际的移动设备或任何其他不可见控制台输出的环境，请使用alert替换console.warn和console.log。

在我的使用案例中，SharedWorker与Windows上的Chrome兼容，但与Android上的Chrome不兼容。一旦我禁用了所有的new SharedWorker()实例，JS在桌面和移动端都正常加载了。

注意：由于沙箱规则，检查SO代码片段中的功能可能无法正常工作。

const ns = {};

ns.compat = () => {
  let ok = true;

  if (window) {
    for (let i of ['Worker', 'SharedWorker', 'getSelection', 'indexedDB', 'localStorage', 'IntersectionObserver', 'MutationObserver', 'sessionStorage', 'fetch', 'IDBTransaction', 'IDBKeyRange', 'IDBDatabase', 'WebSocket']) {
      if (window[i])
        continue;
      console.warn('Missing window feature: ', i);
      ok = false;
    }
  }

  if (navigator) {
    for (let i of ['serviceWorker', 'userAgentData', 'mediaDevices', 'geolocation', 'hid', 'onLine', 'language', 'permissions', 'clipboard']) {
      if (navigator[i])
        continue;
      console.warn('Missing navigator feature: ', i);
      ok = false;
    }
  }

  ok && console.log('All features: ok');
}

ns.compat();

- OXiGEN