React-dnd: Проблема с проигрышем событий Firefox

Созданный на 5 апр. 2018 · 7Комментарии · Источник: react-dnd/react-dnd

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

Воспроизведение

Щелкните источник перетаскивания и начните перетаскивать его, отпустите кнопку мыши до появления предварительного просмотра. В учебном примере после того, как вы сделаете это один раз, цели перетаскивания останутся выделенными. Иногда вам нужно сделать это немедленно снова, чтобы вызвать полную ошибку.

Это намного проще сделать на медленных страницах, где для предварительного просмотра требуется время. У меня есть страница, которая работает очень медленно, и я могу воспроизвести ее, отпуская щелчок, иногда даже через секунду после начала перетаскивания.

Симптомы

Как только вы вызвали ошибку, Firefox перестает отправлять события перетаскивания, кроме перетаскивания, почти на каждую вкладку. Иногда я могу вызвать проблему на одной странице из-за реакции на нее, и тогда все мои другие вкладки начинают проявлять те же симптомы.

Есть только два способа выйти из этого сломленного состояния. Во-первых, вы можете закрыть и снова открыть браузер. Во-вторых, вы можете начать перетаскивание на страницу, где все еще работает response-dnd. Как только вы это сделаете, страница, вызвавшая остановку, получит событие dragend. Так:

Вкладка 1 видит начало клика
На вкладке 1 не отображаются другие события, кроме clickstart
Откройте вкладку 2 и начните перетаскивать
Вкладка 1 видит клик и снова работает

Вот видео, показывающее это странное поведение с использованием двух вкладок, показывающих https://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html.

ReactDnDFirefoxBug.zip

Я использую macOS High Sierra 10.13.3 (17D102) с Firefox 59.0.2 (64-разрядная версия). Похоже, это происходит с любой версией> = 57. Я воспроизвел ошибку с помощью response-dnd 2.6.0 и 2.5.4.

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

browser bug bug wontfix

Источник

jsteel

👍10

Самый полезный комментарий

Билет открыт с помощью Mozilla здесь: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel 6 апр. 2018

👍3

Все 7 Комментарий

Я нашел лучший способ вызвать ошибку, в которой даже не используется response-dnd.

После того, как вы сломали страницу, я могу найти единственный способ исправить это - это переместить шахматную фигуру в примере response-dnd или перезапустить Firefox. Я не совсем уверен, что делает пример response-dnd, чтобы отклеить его, или как найти обходной путь для этого.

<html>
<head>
</head>
<body>
<p>
  Click and drag the draggable item for longer than 1 second to see it dragging.
  Click, drag, and release within 1 second to cause the error.
</p>

<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

<style>
  #draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }
</style>

<script>
  var dragged;

  /* events fired on the draggable target */
  document.addEventListener("drag", function( event ) {
    console.log('drag')
  }, false);

  function sleep(ms){
      var waitTimeInMilliseconds = new Date().getTime() + ms;
      while(new Date().getTime() < waitTimeInMilliseconds ) true;
  }

  document.addEventListener("dragstart", function( event ) {
      // store a ref. on the dragged elem
      dragged = event.target;
      // make it half transparent
      event.target.style.opacity = .5;

      sleep(1000);

      // You can use this approach instead of the sleep. The image is quite
      // large so it's easy to release the mouse before the image is loaded
      // var img = new Image();
      // img.src = 'http://awakeningthegoddesswithin.net/wp/wp-content/uploads/2015/06/moon.jpg';
      // event.dataTransfer.setDragImage(img, 10, 10);
  }, false);

  document.addEventListener("dragend", function( event ) {
    console.log("dragend")
      // reset the transparency
      event.target.style.opacity = "";
  }, false);

  /* events fired on the drop targets */
  document.addEventListener("dragover", function( event ) {
      console.log("dragover")
      // prevent default to allow drop
      event.preventDefault();
  }, false);

  document.addEventListener("dragenter", function( event ) {
      console.log("dragenter")
      // highlight potential drop target when the draggable element enters it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "purple";
      }

  }, false);

  document.addEventListener("dragleave", function( event ) {
      console.log("dragleave")
      // reset background of potential drop target when the draggable element leaves it
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
      }

  }, false);

  document.addEventListener("drop", function( event ) {
      console.log("drop")
      // prevent default action (open as link for some elements)
      event.preventDefault();
      // move dragged elem to the selected drop target
      if ( event.target.className == "dropzone" ) {
          event.target.style.background = "";
          dragged.parentNode.removeChild( dragged );
          event.target.appendChild( dragged );
      }
  }, false);
</script>
</body>

jsteel 6 апр. 2018

Билет открыт с помощью Mozilla здесь: https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel 6 апр. 2018

👍3

Я могу это подтвердить :(

deepj 10 апр. 2018

👍1

Подтверждено

darthtrevino 19 апр. 2018

👍1

В Firefox внесено исправление, которое должно быть выпущено с Firefox 63 (запланированный выпуск на 2018-10-23)

renchap 3 авг. 2018

Эта проблема была автоматически помечена как устаревшая, поскольку в последнее время не было активности. Он будет закрыт, если больше не будет активности. Спасибо за ваш вклад.

stale[bot] 6 июл. 2019

Это все еще происходит со мной как в Fedora 30, так и в Windows 10 (Firefox 69). Я также добавил эту информацию в заявку Firefox. Поскольку последний комментарий к билету перед моим гласит:

Проблема, по-видимому, также возникает, только если перерисовка запрашивается «в основном потоке».
При переносе перерисовки в requestAnimationFrame () это работает должным образом.

Что мы можем сделать, чтобы обойти ошибку в библиотеке?

Изменить 19.09.2019:
Похоже, что в Firefox 69 произошел регресс, в котором эта ошибка снова появилась, я подал им новый тикет: https://bugzilla.mozilla.org/show_bug.cgi?id=1582401