Khắc phục pointer-events: none không hoạt động trên touchmove Chrome Android 4.4 / ChromeView

Trên Chrome Android 4.4 (và ChromeView), CSS pointer-events: none không chặn sự kiện touchmove trên element overlay. Giải pháp là dùng JavaScript ngăn chặn mặc định.

Giải pháp: preventDefault() trên touchstart

overlay.addEventListener('touchstart', function(ev) {
  ev.preventDefault();
});

Giải thích

• touchstart kích hoạt khi ngón chạm màn hình.
• ev.preventDefault() ngăn hành vi mặc định của trình duyệt (scroll, click, v.v.).
• Khi touchstart bị prevent, chuỗi sự kiện touchmove, touchend cũng bị chặn trên element đó.

Lưu ý

• Chỉ áp dụng cho element overlay cụ thể, không dùng trên document hoặc body (sẽ chặn toàn bộ cuộn trang).
• Android 4.4 đã rất cũ (API 19, 2013). Nếu không còn hỗ trợ, có thể bỏ qua fix này.
• Trên trình duyệt hiện đại, pointer-events: none hoạt động tốt cho cả chuột và touch.

Best practice hiện đại

.overlay {
  pointer-events: none; /* cho mouse */
  touch-action: none;   /* cho touch, chặn scroll/zoom trên element này */
}

touch-action: none (CSS) là cách chuẩn hiện đại để chặn touch behavior trên element.