Как запретить click в определенное место карточки?

Question

[Skilful221]

есть карточка

<div class="service-block__card">
        <h2 class="service-block__card-title">Электрика</h2>
        <div class="service-block__card-img">
          <img src="img/service/service-5.jpg" alt="service-5">
          <span></span>
        </div>
        <div class="service-block__card-text">
          <p>Все понимают, что электрика – дело ответственное, сопряжённое с безопасностью и одновременно комфортом проживания.</p>
          <p>Электропроводка может быть устроена двумя способами:</p>
          <ul>
            <li>Закрытым. Прячется внутри стен и перекрытий, не портит внешнего вида. Наиболее часто применяется в жилых помещениях;</li>
            <li>Открытым. Располагается на поверхности стен и потолков, расположена в специальных коробах, может быть вмонтирована в плинтуса.</li>
          </ul>
          <a href="javascript:void(0)" class="service-block__card-open"><span class="openSpan">Раз</span>вернуть</a>
          <div class="hide__text">
            <p>Электромонтаж в городской квартире и каменном загородном доме имеют много общего. Отличительные особенности для каменной загородной постройки:</p>
            <ol>
              <li>Обязательное устройство заземления;</li>
              <li>Устройство молниезащиты;</li>
              <li>Обязательное применение устройств защитного отключения.</li>
            </ol>
            <p>Монтаж электропроводки в деревянном доме имеет свои особенности. Сопряжено это с высокой пожароопасностью. Прежде всего, надо правильно рассчитать расчет нагрузок, исходя из него, подобрать кабель. Прокладка проводки внутри деревянных стен и перекрытий должна проводиться только в металлической трубе.</p>
            <p>Хотите жить комфортно? Ответственно относитесь к безопасности проживания?</p>
            <p>Выбирайте профессионалов!</p>
          </div>
        </div>
      </div>

&__card
      position: relative
      min-height: 420px
      background-color: white
      display: flex
      flex-direction: column
      max-width: 500px
      margin: 10px auto 0
      padding: 10px
      align-items: center
      transition: all .2s linear
      &-text
        display: -webkit-flex
        display: -moz-flex
        display: -ms-flex
        display: -o-flex
        display: flex
        flex-direction: column
        overflow: hidden
        pointer-events: none
        p
          +reg
          font-size: 14px
          max-width: 436px
          display: block
          text-align: justify
        
        ol
          font-size: 14px
          text-align: justify
        ul
          font-size: 14px
          text-align: justify
      &-title
        text-align: center
        font-size: 20px
        color: $title-color
      &-open
        position: absolute
        bottom: 0px
        left: 50%
        transform: translate(-50%, -50%)
        display: inline-block
        +reg
        color: $main-color
        border-bottom: 1px solid $main-color
        +bold
        margin: 0 auto
        margin-top: -50px
        font-size: 20px
        cursor: pointer
        user-select: none
        z-index: 1
      &-close
        display: table
        margin: 0 auto
        +reg
        color: $main-color
        border-bottom: 1px solid $main-color
      &-img
        position: relative
        img
          display: block
          margin: 0 auto
          max-width: 455px
          width: 100%
          height: 110px
      &:hover
        cursor: pointer
        background-color: lighten($main-color, 10%)
        h2
         color: #fff
         text-decoration: underline
        p
          color: #fff
        ol
          color: #fff
        ul
          color: #fff
        a
          color: #fff
          pointer-events: none

let service__card = document.querySelectorAll('.service-block__card');


    for(let i = 0; i < service__card.length; i++){
        service__card[i].addEventListener('click', (event) => {
            const target = event.target;
            console.log(target);
        });
    }

Делаю следующее, можете кстати взглянуть на карточки на сайте они идут сразу после главного слайдера. Так вот, я хочу карточки, сделать ведущими на определенную страницу сайта, у меня вся карточка обводится hover-ом при наведении, можно было бы просто ее сделать через onClick="document.location='main_page-list.php'" ведующей на определенную страницу, но проблема в том, что в карточке еще развертывающийся список (скрытый текст) , нужно чтобы при нажати на развернуть, ссылка не работала, сейчас я с помощью event кликаю на развернуть и вижу что он выделяет карточку целиком, это hover effect он как бы над кнопкой развенуть, как сделать так чтобы при нажатии на развенуть не происходил переход по ссылке?

Answer 1

[xonar]

e.preventDefault() то что вам нужно, если я правильно вас понял.

По классу или айди определяете кнопку Развернуть и на неё вешаете обработчик с preventDefault и получаем, что вы и хотели. При клике на развернуть (ссылке), стандартное действие ссылки отменяется.

Answer 2

[Skilful221]

Я еще совсем зеленый в js, попробовал применить это на практике ничего не вышло, вот мой код, может быть подскажите?

document.addEventListener('DOMContentLoaded', () => {
    let hide = document.querySelectorAll('.service-block__card-open, .details-block__card-open');
    let cardText = document.querySelectorAll('.service-block__card-text, .details-block__card-text');
    let hide__text = document.querySelectorAll('.hide__text');
    let heightHide = [];
    let service__card = document.querySelectorAll('.service-block__card');

    for(let i = 0; i < service__card.length; i++){
        service__card[i].addEventListener('click', (event) => {
            document.location.href = 'contacts.php';
        });
    }

    hide.addEventListener("click", preventEvent);
    function preventEvent( event ) {
        if ( event.cancelable ) {
          event.preventDefault();
          console.log("Событие " + event.type + " отменено");
        } else {
          console.warn("Событие " + event.type + " не может быть отменено");
        }
      }

    for (let i = 0; i < hide.length; i++) {
        heightHide.push(hide__text[i].offsetHeight);
        hide__text[i].style.height = '0px';
        hide[i].addEventListener('click', () => {
            cardText[i].classList.toggle('active');
            if (cardText[i].classList.contains('active')) {
                hide__text[i].style.height = heightHide[i] + 'px';;
            } else {
                hide__text[i].style.height = '0px';
            }
        });
    }
    

    let openElem = document.querySelectorAll('.service-block__card-open, .details-block__card-open');
    let openSpan = document.querySelectorAll('.openSpan');

    for (let i = 0; i < openElem.length; i++) {
        openElem[i].addEventListener('click', () => {
            openElem[i].classList.toggle('active');
            if (openElem[i].classList.contains('active')) {
                openSpan[i].innerHTML = 'С';
            } else {
                openSpan[i].innerHTML = 'Раз';
            }
        });
    }
});