How to disable click to a certain place on a card?

Question

JavaScript

have a card

<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);
        });
    }

I am doing the following, by the way, you can look at the cards on the site , they go right after the main slider. So, I want to make cards lead to a specific page of the site, I have the whole card circled by hover on hover, it would be possible just to make it through onClick="document.location='main_page-list.php'" leading to a specific page, but the problem is that the card still has an expandable list (hidden text), it is necessary that when you click on expand, the link does not work, now I use the event to click on expand and see that it selects the entire card, this is a hover effect, it's like would be above the button to unwind, how to make it so that when you click on the unwind, the link does not follow?

Answer 1

Answer 2

There is :focus in CSS for this…
But in this case it was better to delegate events to parent:

<div data-type="my_inputs">
<input />
<input />
…
<input />
</div>

document.querySelector('[aria-inputs="my_inputs"] input').addEventListener('blur', function(){
   this.target.classList.remove(…);
});

Well, other events.
UPD. bl what I wrote ... Friday ...

[].map.call(document.querySelectorAll('[data-type="my_inputs"] input'), function (_input) {
        _input.addEventListener('focus', function (ev) {
…
        });
        _input.addEventListener('blur', function (ev) {
…
        });
    });

Answer 3

e.preventDefault() is what you need, if I understood you correctly.
By class or ID, define the Expand button and hang a handler with preventDefault on it and get what you wanted. When clicking on expand (link), the standard action of the link is canceled.

Answer 4

I'm still quite green in js, I tried to put it into practice, nothing came of it, here's my code, maybe tell me?

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 = 'Раз';
            }
        });
    }
});