Как поставить ссылку на DIV без срабатывания зажатия и отщелкивания левой кнопки мыши?

Ссылка скопирована
26 марта 2026 1 ответ

Доброго времени суток. В слик слайдере у меня блоки с ссылками, на блоке DIV стоит ссылка по такой модели:

onclick="location.href='/mylink/';

В Слайдере работает свайп мышкой по горизонтали, то есть мышку зажал, слайдер прокрутил. Соответственно при зажатии блока DIV и когда отпускаю левую кнопку мыши у меня сразу происходит переход на другую страницу. Как сделать, что бы не было перехода при зажатии и отщелкивания кнопки в моменте свайпа ?

Сам блок у меня такого вида:

<div class="catalog-nav-box slick-slide slick-cloned" style="background-image: url("/image/cache/catalog/01-img-web/catalog-img/office-kresla/kids-412x412.jpg"); width: 203px;" onclick="location.href='/ofisnye-kresla/detskie-kresla/';" data-slick-index="-1" id="" aria-hidden="true" tabindex="-1"> <a href="/ofisnye-kresla/detskie-kresla/" tabindex="-1">Детские кресла</a> </div>

<div class="catalog-nav-box slick-slide slick-cloned" style="background-image: url("/image/cache/catalog/01-img-web/catalog-img/office-kresla/kids-412x412.jpg"); width: 203px;" onclick="location.href='/ofisnye-kresla/detskie-kresla/';" data-slick-index="-1" id="" aria-hidden="true" tabindex="-1"> <a href="/ofisnye-kresla/detskie-kresla/" tabindex="-1">Детские кресла</a> </div>

Из вариантов переверстать в :

<a href="" style="background-image: url()">  <span>Детские кресла<span> </a>

<a href="" style="background-image: url()"> <span>Детские кресла<span> </a>

Есть еще варианты ? или переверстать все же :)

Дополнительно:

Зачем на диве событие, если на теге ссылки в href тоже самое? Что вы пытаетесь переопределить?

  • Это карусель подкатегорий сайта, картинка больше чем кнопка и должна тоже осуществлять переход в категорию.

    https://skr.sh/sKPSOJXVVBL?a

  • Даниил Конев, так всю карточку ссылкой сделай
  • imko, собственно этот вариант я и написал a > span
  • Даниил Конев, еу так а проблема тогда в чем? Конечно делай так, руками ссылки переписывать ужасная идея. Можешь разве что еще ссылке просто дать размер всей карточки и положить ее слоем поверх остальных элементов но тоже стремный костыль
  • Ответы:

    Собственно решение сам себе придумал:) Переверстать блок:

    <a href="" class="catalog-nav-box">  <span>Детские кресла<span> </a>

    <a href="" class="catalog-nav-box"> <span>Детские кресла<span> </a>

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Алексей Денисов Ответ

    Для того чтобы поставить ссылку на DIV без срабатывания зажатия и отщелкивания левой кнопки мыши, можно использовать атрибуты событий JavaScript.

    Ниже приведен пример кода на JavaScript, который позволяет установить ссылку на DIV без срабатывания зажатия и отщелкивания левой кнопки мыши:

    document.getElementById("myDiv").addEventListener("click", function(event) {
      event.preventDefault();
      window.location.href = "http://example.com";
    });

    document.getElementById("myDiv").addEventListener("click", function(event) { event.preventDefault(); window.location.href = "http://example.com"; });

    В этом примере мы добавляем обработчик события "click" к элементу с идентификатором "myDiv". Внутри обработчика события мы вызываем метод preventDefault() для предотвращения стандартного действия по умолчанию (открытие ссылки) и затем перенаправляем пользователя на указанный URL.

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

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно