Метод 1: использование прослушивателей событий JavaScript

const productCardImage = document.querySelector('.product-card-image');
const productCardTitle = document.querySelector('.product-card-title');
const productCardContents = document.querySelector('.product-card-contents');
productCardImage.addEventListener('click', (event) => {
  event.stopPropagation();
});
productCardTitle.addEventListener('click', (event) => {
  event.stopPropagation();
});
productCardContents.addEventListener('click', (event) => {
  event.stopPropagation();
});

Метод 2: события указателя CSS

.product-card-image, .product-card-title, .product-card-contents {
  pointer-events: none;
}

Метод 3: добавление атрибута «отключено»

const productCardImage = document.querySelector('.product-card-image');
const productCardTitle = document.querySelector('.product-card-title');
const productCardContents = document.querySelector('.product-card-contents');
productCardImage.setAttribute('disabled', 'disabled');
productCardTitle.setAttribute('disabled', 'disabled');
productCardContents.setAttribute('disabled', 'disabled');

Метод 4. Применение наложения CSS
HTML:

<div class="product-card">
  <div class="product-card-image"></div>
  <div class="product-card-overlay"></div>
  <h3 class="product-card-title"></h3>
  <p class="product-card-contents"></p>
</div>

CSS:

.product-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

JavaScript:

const productCardOverlay = document.querySelectorAll('.product-card-overlay');
productCardOverlay.forEach((overlay) => {
  overlay.addEventListener('click', (event) => {
    event.stopPropagation();
  });
});

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