在Chrome浏览器上没有触发可拖动的复选框事件(JSCSS)

Question

我试图尽可能地复制iOS的滑动拨杆，只用JS和CSS.我发现@3rror404的优秀笔，正是这样做的。此处.

虽然它在iOS的Safari中工作得很完美，但在Chrome（桌面和Android）中，它只对点击有反应，而对拖动没有反应，我不明白为什么。我甚至添加了mouseupmousedownmousemove事件，但还是不行。

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.ioazerty1234penBajLqgN

任何知道为什么会发生这种情况或可能的修复？谢谢！我想尽可能地复制iOS系统的滑动切换功能，只用JS和CSS。

Answer 1

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

它为 dragstart 和 touchstartChrome浏览器（在移动模式下）会启动 touchstart 活动。

该 touchstart 事件没有 pageX 和 pageY 变量

它确实有 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)并且它将在移动模式下工作。