Есть ли какой-нибудь способ отменить метод protectDefault в Vanilla JavaScript? - PullRequest
Новая
       11

Есть ли какой-нибудь способ отменить метод protectDefault в Vanilla JavaScript?

3 голосов
/ 07 октября 2019

Я пытаюсь создать контейнер с горизонтальной прокруткой. В точном случае мне нужно вернуть e.preventDefault ();одним щелчком мыши.

Я перепробовал множество вариантов, изменение 'window.location.href' в операторе else представляется отличным вариантом. Но я не могу понять, как получить ссылку на ссылку.

Любая идея может помочь в достижении моей цели. :) 

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
    }

Ответы [ 2 ]

1 голос
/ 07 октября 2019

Вы можете условно запретить запуск события click на вашем слайдере, зарегистрировав прослушиватель событий click, который использует переменную moved совместно с прослушивателями событий mousedown и mousemove.

The *Опция 1007 *{ passive: true } указывает, что слушатель не вызывает 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);
<input type="range" />
0 голосов
/ 07 октября 2019

Вы должны удалить прослушиватель событий, содержащий 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);
    }
})
...