предотвратить щелчок, когда оставить перетащить, чтобы прокрутить в JS - PullRequest
Новая
       38

предотвратить щелчок, когда оставить перетащить, чтобы прокрутить в JS

2 голосов
/ 12 октября 2019

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

вот фрагмент: 

const slider = document.querySelector('.wrapper');
let isDown = false;
let startX;
let scrollLeft;


slider.addEventListener('mousedown', (e) => {
    isDown = true;
    slider.classList.add('active');
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;

});

slider.addEventListener('mouseleave', () => {
    isDown = false;
    slider.classList.remove('active');
});

slider.addEventListener('mouseup', () => {
    isDown = false;
    slider.classList.remove('active');
});

slider.addEventListener('mousemove', (e) => {
    if(!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX)*2;
    slider.scrollLeft = scrollLeft - walk;
});

document.getElementsByClassName('.book').ondragstart = function() { return false; };
.wrapper {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: auto;
    min-width: 100%;
}

.book {
    width: auto;
    height: 100vh;
    min-width: 50vw;
}

.one {
  background-color: #d07fe0;
  }
  
.two {
  background-color: #808888;
  }
  
.three {
  background-color: #83e7dc;
  }
  
.four {
  background-color: #edf7a8;
  }
  
.five {
  background-color: #e9d98f;
  }
  
.six {
  background-color: #fdd;
  }
  
<body>
<div class="wrapper">
    <a href="https://stackoverflow.com/" class="book one"></a>
    <a href="https://stackoverflow.com/" class="book two"></a>
    <a href="https://stackoverflow.com/" class="book three"></a>
    <a href="https://stackoverflow.com/" class="book four"></a>
    <a href="https://stackoverflow.com/" class="book five"></a>
    <a href="https://stackoverflow.com/" class="book six"></a>
</div>
</body>

Буду признателен за любую помощь. Спасибо! БИК

1 Ответ

2 голосов
/ 12 октября 2019

Один подход, который я могу предложить.

Определить функцию preventClick

const preventClick = (e) => {
        e.preventDefault();
        e.stopImmediatePropagation();
      }

Определить переменную isDragged для условного добавления и удаления прослушивателей событий. 

let isDragged = false;

При событии mouseup вы вводите 2 случая: isDragged = false ( в случае нажатия ) или isDragged = true ( в случае перетаскивания )

Первый случай: Удалите EventListener, который предотвращает распространение кликов

Второй случай: Добавьте прослушиватель событий, который предотвращает распространение кликов.

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

const slider = document.querySelector(".wrapper");
      const preventClick = (e) => {
        e.preventDefault();
        e.stopImmediatePropagation();
      }
      let isDown = false;
      var isDragged = false;
      let startX;
      let scrollLeft;

      slider.addEventListener("mousedown", e => {
        isDown = true;
        slider.classList.add("active");
        startX = e.pageX - slider.offsetLeft;
        scrollLeft = slider.scrollLeft;
      });

      slider.addEventListener("mouseleave", () => {
        isDown = false;
        slider.classList.remove("active");
      });

      slider.addEventListener("mouseup", e => {
        isDown = false;
        const elements = document.getElementsByClassName("book");
        if(isDragged){
            for(let i = 0; i<elements.length; i++){
                  elements[i].addEventListener("click", preventClick);
            }
        }else{
            for(let i = 0; i<elements.length; i++){
                  elements[i].removeEventListener("click", preventClick);
            }
        }
        slider.classList.remove("active");
        isDragged = false;
      });

      slider.addEventListener("mousemove", e => {
        if (!isDown) return;
        isDragged =  true;
        e.preventDefault();
        const x = e.pageX - slider.offsetLeft;
        const walk = (x - startX) * 2;
        slider.scrollLeft = scrollLeft - walk;
      });

      document.getElementsByClassName("book").ondragstart = function() {
        console.log("Drag start");
      };
      .wrapper {
        position: relative;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        overflow: auto;
        min-width: 100%;
      }

      .book {
        width: auto;
        height: 100vh;
        min-width: 50vw;
      }

      .one {
        background-color: #d07fe0;
      }

      .two {
        background-color: #808888;
      }

      .three {
        background-color: #83e7dc;
      }

      .four {
        background-color: #edf7a8;
      }

      .five {
        background-color: #e9d98f;
      }

      .six {
        background-color: #fdd;
      }
<body>
      <div class="wrapper">
        <a href="https://stackoverflow.com/" class="book one"></a>
        <a href="https://stackoverflow.com/" class="book two"></a>
        <a href="https://stackoverflow.com/" class="book three"></a>
        <a href="https://stackoverflow.com/" class="book four"></a>
        <a href="https://stackoverflow.com/" class="book five"></a>
        <a href="https://stackoverflow.com/" class="book six"></a>
      </div>
    </body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...