Как добавить параметры в событие окна / колесико мыши в svelte - PullRequest
Новая
       17

Как добавить параметры в событие окна / колесико мыши в svelte

0 голосов
/ 03 февраля 2020

Я бы хотел послушать колесо мыши, и если мышь находится над определенным элементом, отмените настройку по умолчанию и сделайте мои вещи вместо этого.

Пока я просто хочу зарегистрировать событие и предотвратить его: 

  const handleWheel = e => {
    console.log(e);
    e.preventDefault();
  };

Используя svelte, я придумал: 

<svelte:window on:wheel={handleWheel} />

К сожалению, это только позволяет мне регистрировать событие и выдает следующее сообщение об ошибке:

Невозможно предотвратитьDefault внутри вызова пассивного прослушивателя событий.

Используя чистый JS, решение заключается в добавлении параметр: 

window.addEventListener("wheel", handleWheel, { passive: false});

Но я не могу найти пути в документации svelte, где упоминается, как это можно сделать. Так как бы вы сделали это стройным способом?

Ответы [ 2 ]

2 голосов
/ 03 февраля 2020

В настоящее время нет никакого способа сделать это идиоматически с помощью обработчика событий, потому что Chrome сломал сеть , сделав определенные прослушиватели событий пассивными по умолчанию. Существует открытая проблема Svelte , которая решит эту проблему.

Между тем, наиболее идиоматическим способом c может быть использование действия: 

<script>
  let scrollable = true;

  const wheel = (node, options) => {
    let { scrollable } = options;

    const handler = e => {
      if (!scrollable) e.preventDefault();
    };

    node.addEventListener('wheel', handler, { passive: false });

    return {
      update(options) {
        scrollable = options.scrollable;
      },
      destroy() {
        node.removeEventListener('wheel', handler, { passive: false });
      }
    };
  };
</script>

<svelte:window use:wheel={{scrollable}} />

Демо здесь.

2 голосов
/ 03 февраля 2020

Ну, ваш код работает так, как он для меня ... 

<script>
  const handleWheel = e => {
    console.log(e);
    e.preventDefault();
  };
</script>

<svelte:window on:wheel={handleWheel} />

См. в REPL .

Может быть, это ваш браузер, но я думаю, что это может быть также сам REPL (если это то, что вы использовали), который может иметь некоторые проблемы с <svelte:window /> событиями и отображать устаревшие журналы ...

На самом деле, ваше решение будет противоположно тому, что Вы хотите, и вызвать предупреждение: 

window.addEventListener("wheel", handleWheel, { passive: true });

С MDN :

пассивный

логический который, если true, указывает, что функция, указанная слушателем, никогда не будет вызывать protectDefault (). Если пассивный прослушиватель вызывает функцию protectDefault (), пользовательский агент не будет ничего делать, кроме как сгенерировать консольное предупреждение.

С этим способом Svelte добавлять опции в прослушиватели событий можно с помощью модификаторы .

Например: 

<svelte:window on:wheel|preventDefault={handleWheel} />

<svelte:window on:wheel|passive={handleWheel} />

Они комбинируемы, но preventDefault и passive не go вместе, так что давайте использовать еще один: 

<svelte:window on:wheel|preventDefault|once={handleWheel} />

См. документы Svelte по событиям для доступных модификаторов и подробности:

Доступны следующие модификаторы:

warnDefault - вызывает event.preventDefault () перед запуском обработчика события (Svelte добавит его автоматически, где это можно сделать безопасно)

capture - один раз запускает обработчик во время фазы захвата вместо фазы

- удаляет обработчик после первого запуска

Модификаторы могут быть объединены в цепочку, например on:click|once|capture={...}.

...