Как отключить дефолтное событие по клику (чтобы не произошел переход по ссылке)?

Question

[Тимур]

Здравствуйте. Сделал галерею типа: "интересные статьи". Скролл с помощью мыши работает, но через раз. С помощью $(this).bind('click', stop) попытался предотвратить срабатывание на переход по ссылке. Но работает через раз. Первый раз когда начинаю двигать курсор переход по ссылке все равно срабатывает.
Подскажите, пожалуйста, где исправить. Вопрос задаю первый раз, если что не так сделал, скажите - исправлю

$(document).ready(function() {
    const LINK = $('.JS_DragScroll .carusel_review-item'),
          FIELD = $('.JS_DragScroll');
    let startClick = 0,
        endClick = 0,
        currentDate = () => Date.now();

    LINK.each(function() {
        $(this).bind('click', stop)
    })
    FIELD.mousedown(function() {
        startClick = currentDate();
        LINK.each(function() {
            $(this).bind('click', stop);
        })
    })
    FIELD.mouseup(function() {
        endClick = currentDate();
        if(endClick - startClick < 500) {
            LINK.each(function() {
                $(this).unbind('click', stop);
            })
        }
    })

    function stop() {
        return false;
    }
})

$(document).ready(function() {
    (function() {
        const scrollBox = document.querySelectorAll('.JS_DragScroll'),
                  lengthSB = scrollBox.length;

        let left = 0, // отпустили мышку - сохраняем положение скролла
            drag = false,
            coorX = 0; // нажали мышку - сохраняем координаты.

        for(i = 0; i < lengthSB; i++) {
            scrollBox[i].ondragstart = function() {
                return false;
            }
        }

        for(i = 0; i < lengthSB; i++) {
            scrollBox[i].addEventListener('mousedown', function(e) {
                 drag = true;
                 coorX = e.pageX - this.offsetLeft;
               })
        }

        document.addEventListener('mouseup', function() {
            drag = false;
            for(i = 0; i < lengthSB; i++) {
                left = scrollBox[i].scrollLeft;
            }
        })

        for(i = 0; i < lengthSB; i++) {
            scrollBox[i].addEventListener('mousemove', function(e) {
                 if (drag) {
                     this.scrollLeft = left - (e.pageX - this.offsetLeft - coorX);
                 }
           })
        }
    })()
})

<div class="carusel_review-wrap">
            <div class="carusel_review-box JS_DragScroll">
                <div class="carusel_review-item"   id="1">
                    <div class="carusel_review-item-body">
                      <a href="#4">Ссылка1</a>
                    </div>
                </div>
                <div class="carusel_review-item"   id="2">
                    <div class="carusel_review-item-body">
                      <a href="#5">Ссылка2</a>
                    </div>
                </div>
                <div class="carusel_review-item"   id="3">
                    <div class="carusel_review-item-body">
                      <a href="#5">Ссылка3</a>
                    </div>
                </div>
                <div class="carusel_review-item"   id="4">
                    <div class="carusel_review-item-body">
                      <a href="#1">Ссылка4</a>
                    </div>
                </div>
                <div class="carusel_review-item"   id="5">
                    <div class="carusel_review-item-body">
                      <a href="#2">Ссылка5</a>
                    </div>
                </div>
            </div>
        </div>

/* стили wrap */
.carusel_review-wrap {
    background-color: #f3f4f8;
    margin: 10px 10px;
    padding: 10px;
}

/* стили box */
.carusel_review-box {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    border-radius: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.carusel_review-box::-webkit-scrollbar { width: 0; }

/* стили item */
.carusel_review-item {
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #fff;
    min-width: 75%;
    padding: 10px;
    text-align: center;
}
.carusel_review-item:not(:last-child) {
    margin-right: 10px;
}

.carusel_review-item-body a {
    display: block;
}

Answer 1

[Big_Trouble]

// link - наша ссылка
// На ссылку вешаем событие onclick, в коллбэк передаем event(событие)
// preventDefault предотвращает дэфолтное поведение элементов страницы,
// То есть если это ссылка, то браузер не перейдет по ссылке, если это форма, то форма не отправиться и тд...

link.addEventListener('click', (e) =>{
    e.preventDefault();
})

Comments

[Big_Trouble]

Кстати чувак снизу прав. Если у тебя будем много элементом , то обработчик лучше вешать на их общий родительский элемент, и при клике проверять, является ли event.target - вашей ссылкой.

Answer 2

[Артём Дайнов]

Советую взять элемент, в который помещается ваша галерея.
Далее на этот элемент повесить addEventListener('click',function,false);
В функции отловить в событии клик на ссылку event.target.tagName==='a'
ну а дальше event.preventDefault

Уж как это сделать через jquery, не знаю.

Comments

[Тимур]

большое спасибо! Получилось отменить. Но тут я столкнулся со следующей проблемой. Изначальная задумка была: определить время нажатия на элемент галереи и, если время нажатия меньше 500, то эмулировать click, в противном случае должно быть просто пролистывание галереи. Выглядит это так:

let startClick = 0,
      endClick = 0,
      currentDate = () => Date.now();

//отслеживание клика и отмена действия по дефолту
gallery.addEventListener('click', blockclick.bind(event) )
 function blockclick(e) {   
     if (event.target.nodeName === 'A') {
          e.preventDefault();  
     }
}

//вычисление времени нажатия
gallery.addEventListener('mousedown', ()  => { //засекаем, когда кнопка мыши нажата
    startClick = currentDate();
})
gallery.addEventListener('mouseup', (e)  => {  //узнаем, когда кнопку мыши отпустили
    endClick = currentDate();
    if (endClick - startClick < 500) {
        triggerEvent(e);
    }
})

//функция эмуляции нажатия на ссылку
    function triggerEvent(elem) {
        let clickEvent = new Event ('click');
        elem.target.removeEventListener('click', blockclick ) //убираем обработчик отмены 
        elem.target.dispatchEvent(clickEvent);                     //события по дефолту
    }

но по не известной (мне :-) )причине эмуляция клика не срабатывает. Подскажите, пожалуйста, в каком направлении копать