Chrome (JS/CSS) 上未触发的可拖动切换复选框事件

Question

我正在尝试尽可能接近地复制 iOS 的滑动切换，仅使用 JS 和 CSS。我找到了 @3rror404 的优秀笔，它确实做到了 here.

虽然它在 iOS Safari 中完美运行，但在 Chrome（桌面和 Android）中它确实只对点击而不是拖动做出反应，我不明白为什么.我什至添加了 mouseup/mousedown/mousemove 事件，但仍然不行..

for (let i = 0; i < switches.length; i++) {

  const switchEl = switches[i];

  switchEl.draggable = true;

  ['dragstart', 'touchstart','mousedown'].forEach(function(e) {
    switchEl.addEventListener(e, onDragStart);
  });

  ['dragover', 'touchmove','mousemove'].forEach(function(e) {
    switchEl.addEventListener(e, onDragOver);
  });

  ['dragend', 'touchend','mouseup'].forEach(function(e) {
    switchEl.addEventListener(e, onDragEnd);
  });

}

在这里查看我编辑的笔：https://codepen.io/azerty1234/pen/BajLqgN

知道为什么会发生这种情况或可能的修复方法吗？谢谢！

Answer 1

我在笔中发现了一个错误。

它为 dragstart 和 touchstart 添加相同的事件处理程序 Chrome（在移动模式下）触发 touchstart 事件。

touchstart 事件没有 pageX 和 pageY 变量（第 64 和 65 行）

确实有 evt.touches[0].pageX 和 evt.touches[0].pageY

您应该检查 evt.type 是否等于 'touchstart'：

function onDragStart(evt) {
  evt = evt || window.event;
  const x = (evt.type == 'touchstart') ? evt.touches[0].pageX : evt.pageX,
        y = (evt.type == 'touchstart') ? evt.touches[0].pageY : evt.pageY;
...

function onDragOver(evt) {
  evt = evt || window.event;

  evt.preventDefault();
  const x = (evt.type == 'touchmove') ? evt.touches[0].pageX : evt.pageX,
        y = (evt.type == 'touchmove') ? evt.touches[0].pageY : evt.pageY;
...

在 onDragOver (64,65) 和 onDragStart (90,91) 中应用此更改，它将在移动模式下工作

Chrome (JS/CSS) 上未触发的可拖动切换复选框事件

Draggable toggle checkboxes events not firing on Chrome (JS/CSS)

javascript

css

draggable

mousemove

touchstart