javascript - 有没有办法恢复 Vanilla JavaScript 中的 preventDefault 方法？

Question

我正在尝试创建一个水平滚动容器。在精确的情况下，我需要恢复 e.preventDefault();来自点击。

我尝试了很多选项，在 else 语句中更改 'window.location.href' 似乎是一个不错的选择。但我不知道如何从点击的链接中获取 href。

任何想法都可以帮助实现我的目标。 :)

slider.addEventListener('mouseup', () => {
    isDown = false;

    // Disable click event (for ever unfortunately)
    if(moved === true) {
        this.addEventListener('click', (e) => {
            e.preventDefault();
        });
    } else {
        // trying to reset click function
    }

Answer 1

您可以通过注册一个与您的 mousedown 共享 moved 变量的 click 事件监听器，有条件地阻止在您的 slider 上触发点击事件和 mousemove 事件监听器。

{ passive: true }选项表示监听器不调用 event.preventDefault()，并节省大量 CPU 时间，特别是对于每秒可以触发多次的 mousemove 事件。

true 参数表示事件监听器应该在事件开始从目标元素冒泡之前被调用。这允许它甚至阻止传播到已经添加到同一元素上的监听器，只要它们没有将 useCapture 也设置为 true。

const slider = document.querySelector('input[type="range"]');

// prevent this if mousemove occurred between mousedown and mouseup
slider.addEventListener('click', () => {
  console.log('click event fired on slider');
});

// fires just before click event
slider.addEventListener('mouseup', () => {
  console.log('mouseup event fired on slider');
});

let moved = false;

// reset for each potential click
slider.addEventListener('mousedown', () => {
  moved = false;
});

// indicate cancellation should occur for click
slider.addEventListener('mousemove', () => {
  moved = true;
}, { passive: true });

// prevents click event if mousemove occurred between mousedown and mouseup
slider.addEventListener('click', event => {
  if (moved) {
    event.preventDefault();
    event.stopImmediatePropagation();
  }
}, true);

<input type="range" />