iOS端悬停效果实现的JavaScript代码有效性咨询及免费测试方法求助

嘿，我来帮你拆解下你遇到的两个问题——代码能不能正常工作，还有怎么免费在iOS上测试~

先说说你的JavaScript代码问题 #

你当前的代码没法正常运行，核心问题出在这行代码上：

const navbarElement = document.querySelectorAll('.navbar .subnav #raiseup img.catalogue-img');

document.querySelectorAll()返回的是一个NodeList（节点列表），它是多个DOM元素的集合，而addEventListener是单个DOM元素的专属方法，直接给整个列表绑定事件会直接报错！

你得遍历这个列表里的每一个图片元素，给它们分别绑定触摸事件才行，修正后的代码参考如下：

const navbarElements = document.querySelectorAll('.navbar .subnav #raiseup img.catalogue-img');

navbarElements.forEach(element => {
  element.addEventListener('touchstart', function(e) {
    e.preventDefault(); // 阻止默认触摸行为
    this.classList.toggle('hovered');
  });

  // 可选：在触摸结束或取消时移除类
  element.addEventListener('touchend', function() {
    this.classList.remove('hovered');
  });

  element.addEventListener('touchcancel', function() {
    this.classList.remove('hovered');
  });
});

另外提个小细节：e.preventDefault()要谨慎使用，有时候会影响页面滚动等默认触摸行为，如果测试时发现页面滚动异常，可以先去掉这句试试效果~

免费在iOS上测试的方法 #

不用花钱买实体设备也能完成测试，给你两个靠谱的免费方案：

• Mac+iOS实体设备组合：把你的iOS设备用数据线连到Mac上，打开Mac的Safari，去「偏好设置-高级」里勾选「在菜单栏中显示开发菜单」，之后点击菜单栏的「开发」选项，就能看到你连接的iOS设备，选择对应的网页就能直接调试，还能模拟触摸、悬停这些操作。
• Xcode模拟器：在Mac上的App Store免费安装Xcode，打开后直接启动模拟器（可以在Xcode的「Window-Devices and Simulators」里添加不同版本的iOS模拟器），然后在模拟器里打开Safari，输入你的网页地址就能测试，完全不需要实体iOS设备。

如果没有Mac的话，也可以试试Windows平台上的免费iOS模拟器工具，注意从正规渠道下载就好~

备注：内容来源于stack exchange，提问作者Spikes D