pulint
@pulint

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

Здравствуйте. Сделал галерею типа: "интересные статьи". Скролл с помощью мыши работает, но через раз. С помощью $(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;
}
  • Вопрос задан
  • 249 просмотров
Решения вопроса 2
Big_Trouble
@Big_Trouble
Программист недосамоучка
// link - наша ссылка
// На ссылку вешаем событие onclick, в коллбэк передаем event(событие)
// preventDefault предотвращает дэфолтное поведение элементов страницы,
// То есть если это ссылка, то браузер не перейдет по ссылке, если это форма, то форма не отправиться и тд...

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

Уж как это сделать через jquery, не знаю.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы