Как предотвратить нажатие на удержание и перетаскивание - PullRequest
Новая
       39

Как предотвратить нажатие на удержание и перетаскивание

0 голосов
/ 16 октября 2018

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

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

 <main>
        <div class="projects-list">
            <article class="old-and-blue fade-in">
                <h1>old and blue</h1>
                <figure>
                    <a href="projects/old-and-blue.html">
                        <img src="assets/media/images/slides/old-and-blue.jpg" alt="">
                    </a>
                </figure>
            </article>
            <article class="paperland fade-in">
                <h1>Paperland</h1>
                <figure>
                    <a href="projects/paperland.html">
                        <img src="assets/media/images/slides/paperland.jpg" alt="">
                    </a>
                </figure>
            </article>
            <article class="contessa fade-in">
                <h1>Contessa</h1>
                <figure>
                    <a href="projects/contessa.html">
                        <img src="assets/media/images/slides/contessa.jpg" alt="">
                    </a>
                </figure>
            </article>
            <article class="myself-and-i fade-in">
                <h1>Myself and I</h1>
                <figure>
                    <a href="projects/myself-and-i.html">
                        <img src="assets/media/images/slides/myself-and-i.jpg" alt="">
                    </a>
                </figure>
            </article>
        </div>
    </main>

, и вот мой js 

const projectList = document.querySelector('.projects-list');
let isDown = false;
let startX;
let scrollLeft;

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

});

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

projectList.addEventListener('mouseup', ()=>{
    isDown = false;
    projectList.classList.remove('active');
    projectList.style.transition = '1s';
});

projectList.addEventListener('mousemove', (e)=>{
    if ( !isDown ) return; // stop the function from running
    e.preventDefault();
    const x = e.pageX - projectList.offsetLeft;
    const walk = x - startX;
    projectList.scrollLeft = scrollLeft - walk;
});
...