> 文章列表 > 滚动事件和点击事件是存在一些兼容性问题的

滚动事件和点击事件是存在一些兼容性问题的

滚动事件和点击事件是存在一些兼容性问题的

在 iOS 中,滚动事件和点击事件是存在一些兼容性问题的。当页面发生了滚动,点击事件可能无法被触发。造成该问题的原因是 iOS 的默认行为会处理滚动事件,导致同一时间内无法触发点击事件。

为了解决这个问题,我们通常可以采取以下方法之一:

1. 使用 touchstart 和 touchend 事件代替 click 事件

像下面这样,你可以在 touchstart 触发时阻止事件冒泡,而在 touchend 时手动触发链接或其他点击事件:

```javascript
var touchstartX = 0;
var touchstartY = 0;

elem.addEventListener('touchstart', function(event) {
    touchstartX = event.changedTouches[0].screenX;
    touchstartY = event.changedTouches[0].screenY;
});

elem.addEventListener('touchend', function(event) {
    var touchendX = event.changedTouches[0].screenX;
    var touchendY = event.changedTouches[0].screenY;
    if (Math.abs(touchendX - touchstartX) < 10 && Math.abs(touchendY - touchstartY) < 10) {
        event.preventDefault();
        // 手动触发链接或其他点击事件
    }
});
```

在这个代码是中,我们依然使用 touchstart 和 touchend 事件代替了 click 事件,并手动触发了链接或其他点击事件。

2. 使用 touchmove 事件来禁用默认的浏览器滚动行为

在 touchmove 事件触发时,禁止浏览器的默认滚动行为,可以保证点击事件可以正常触发。

```javascript
document.addEventListener('touchmove', function(e) {
      // 取消浏览器的默认滚动行为
      e.preventDefault();
}, {passive: false});
```

从 iOS11 开始,浏览器中的监听器默认被设置为 passive,我们向 addEventListener 中添加 passive:false 参数来禁用 passive 监听器。

3. 利用 ES6 语法简化代码

可以使用 ES6 的写法来简化上述代码,如下所示:

```javascript
elem.addEventListener('touchstart', event => {
  touchstartX = event.changedTouches[0].screenX;
  touchstartY = event.changedTouches[0].screenY;
});
  
elem.addEventListener('touchend', event => {
  const touchendX = event.changedTouches[0].screenX;
  const touchendY = event.changedTouches[0].screenY;
  if (Math.abs(touchendX - touchstartX) < 10 && Math.abs(touchendY - touchstartY) < 10) {
    event.preventDefault();
    // 手动触发链接或其他点击事件
  }
})
```

以上是一些解决 iOS 中滚动和点击事件兼容性问题的方法,具体采取哪种方案需要根据实际情况来决定。如果你还有其他问题,欢迎继续提问。