有什么方法可以恢复 Vanilla JavaScript 中的 preventDefault 方法吗？

Question

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

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

中获取 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

您应该删除包含 event.preventDefault(); 的事件侦听器。

为此，您必须将函数引用保存到变量中，如下所示：

const preventClickHandler = (e) => e.preventDefault;
slider.addEventListener('mouseup', () => {
    isDown = false;

    // Disable click event (for ever unfortunately)
    if(moved === true) {
        this.addEventListener('click', preventClickHandler);
    } else {
        this.removeEventListener('click', preventClickHandler);
    }
})

Answer 2

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

{ 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" />