有什么方法可以还原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

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

[{ passive: true }选项指示侦听器不调用{ passive: true }，并节省了大量CPU时间，尤其是对于event.preventDefault()事件，它每秒可以触发多次。

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);

Answer 2

您应该删除包含<input type="range" />的事件侦听器。

为此，您必须将函数引用保存到这样的变量中：

event.preventDefault();