Как включить и отключить функцию через события - PullRequest
Новая
       11

Как включить и отключить функцию через события

0 голосов
/ 12 мая 2019

Я создал DIV и некоторые поля ввода в нем динамически, используя DOM.Затем я применил функцию, чтобы иметь возможность ее перемещать: 

document.getElementById('thedivtomove').addEventListener("mousedown", function() {
  mydragfunction.startMoving(this, "thedivcontainer", event);
});
document.getElementById('thedivtomove').addEventListener("mouseup", function() {
  mydragfunction.stopMoving("thedivcontainer");
});

Я хотел бы отключить его (перемещение), когда нажимаю на поля (ввод, комбинации и т. Д.), Но не могу достичь этой цели, несмотря на самые разные способы.

Для меня наиболее логичным было бы обратить события (вверх и вниз) 

    document.getElementById('thefield').addEventListener("mousedown", function() {
      mydragfunction.stopMoving("thedivcontainer");
    });
    document.getElementById('thefield').addEventListener("mouseup", function() {
      mydragfunction.startMoving("theboxtomove", "thedivcontainer", event);
    });

при наведении курсора на поля, но этот выбор, похоже, не работает.Я не сообщаю обо всех других попытках, потому что нахожу их причудливыми (комбинации различных событий, введение флагов и т. Д.)

1 Ответ

0 голосов
/ 12 мая 2019

Хорошо, сначала для события того же типа, click, mousedown, mouseup в том же контексте или элементе есть порядок выполнения.

В тех случаях, когда одно действие инициирует несколько событий, их порядок фиксируется. То есть обработчики вызываются в порядке mousedown → mouseup → click. События обрабатываются в той же последовательности: onmouseup заканчивается до запуска onclick.

Тогда вам нужно подумать об интерфейсе пользователя и инструментах, которые вам дают DOM и браузер.

Например, чтобы достичь вашей цели, я мог бы использовать состояние фокуса входа, чтобы отключить ваши события: 

const divToMove = document.getElementById('thedivtomove');
const inputs    = divToMove.querySelectorAll('input');

inputs.addEventListener('focus', removerListener);
inputs.addEventListener('focusout', listenMove);

const listenMove = () => {
  divToMove.addEventListener('mousedown', mydragfunction.startMoving.bind(this, 'thedivcontainer'));
  divToMove.addEventListener('mouseup', mydragfunction.stopMoving.bind(this, 'thedivcontainer'));
}

const removeListener = () => {
  divToMove.removeEventListener('mousedown, mydragfunction.startMoving);
  divToMove.removeEventListener('mouseup', mydragfunction.stopMoving);
}

Позаботьтесь о функции связывания, которая позволит вам определить контекст для использования внутри функции. Таким образом, ваш mydragfunction.startMoving(this, "thedivcontainer", event); не изменит сигнатуру, но я не передаю объект события в вызове bind. Это будет автоматически пропущено реализацией событий вашего браузера.

...