React-dnd: Firefox 손실 이벤트 문제

에 만든 2018년 04월 05일 · 7코멘트 · 출처: react-dnd/react-dnd

Firefox 자체에서 문제를 일으키는 것으로 보이는 매우 불쾌한 버그를 발견했습니다. 체스 튜토리얼 예제에서도이 오류를 재현 할 수 있습니다. 기본적으로 Firefox가 dragstart를 제외한 어떤 마우스 이벤트도 보내지 않는 상태로 들어갈 수 있습니다.

재현

드래그 소스를 클릭하고 드래그를 시작하고 미리보기가 나타나기 전에 마우스를 놓습니다. 자습서 예제에서 한 번 수행하면 놓기 대상이 강조 표시됩니다. 때로는 전체 버그를 트리거하기 위해 즉시 다시 수행해야합니다.

미리보기가 표시되는 데 시간이 걸리는 느린 페이지에서이 작업을 수행하는 것이 훨씬 쉽습니다. 매우 느린 페이지가 있는데 드래그를 시작한 후 1 초라도 클릭을 해제하여 재현 할 수 있습니다.

조짐

버그를 트리거하면 Firefox는 거의 모든 탭에 dragstart 이외의 드래그 이벤트 전송을 중지하는 것처럼 보입니다. 때로는 한 페이지에서 문제를 일으킬 수 있으며 다른 모든 탭에서 동일한 증상을 나타 내기 시작합니다.

이 고장 상태에서 벗어나는 방법은 두 가지뿐입니다. 먼저 브라우저를 닫았다가 다시 열 수 있습니다. 둘째, react-dnd가 여전히 작동하는 페이지에서 드래그를 시작할 수 있습니다. 이 작업을 수행하면 중단을 유발 한 페이지가 dragend 이벤트를 수신합니다. 그래서:

탭 1에 클릭 스타트가 표시됨
탭 1에는 clickstart 이외의 이벤트가 더 이상 표시되지 않습니다.
탭 2를 열고 드래그 시작
탭 1에 클릭 엔드가 표시되고 이제 다시 작동합니다.

다음은 https://react-dnd.github.io/react-dnd/examples-chessboard-tutorial-app.html을 보여주는 두 개의 탭을 사용하여이 이상한 동작을 보여주는 비디오

ReactDnDFirefoxBug.zip

Firefox 59.0.2 (64 비트)가 설치된 macOS High Sierra 10.13.3 (17D102)을 사용하고 있습니다. 57 이상의 모든 버전에서 발생하는 것 같습니다. react-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 에 2018년 04월 06일

👍3

모든 7 댓글

react-dnd를 사용하지 않는 버그를 유발하는 더 좋은 방법을 찾았습니다.

페이지를 깨고 나면 문제를 해결할 수있는 유일한 방법은 react-dnd 예제에서 체스 조각을 이동하거나 Firefox를 다시 시작하는 것입니다. react-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 에 2018년 04월 06일

Mozilla로 열린 티켓 : https://bugzilla.mozilla.org/show_bug.cgi?id=1452131

jsteel 에 2018년 04월 06일

👍3

나는 이것을 확인할 수 있습니다 :(