Можно ли сделать некликабельный блок внутри кликабельного?

Question

[VanilaSpirit]

Есть примерная структура:

<div class"clickMe column">
<div class"youCantClickMe">Я хочу нажиматься отдельно, либо вообще не нажиматься!</div>
</div>

На clickMe висит нажатие(по факту это всё одна большая кнопка)

Как уже стало известно - хочу либо сделать другой клик на youCantClickMe, либо убрать его вообще. Такое возможно?

Верстку менять не хочется, ибо там сразу кучу всего переделывать(

Comments

[Alams Stoyne]

На чистом HTML Так работать не будет:

<a class"clickMe column">
<a class"youCantClickMe">Я хочу нажиматься отдельно, либо вообще не нажиматься!</a>
</a>

Но если добавить немного JS то возможно

Answer 1

[Rsa97]

document.addEventListener(
  'click',
  (e) => {
    if (e.target.closest('.youCantClickMe')) {
      e.stopPropagation()
      return
    }
    if (!e.target.closest('.clickMe')) {
      return
    }
    // do something
  }
)

Answer 2

[Pavstyuk]

.youCantClickMe {pointer-events: none;}

Comments

[Alex]

По моему это не сработает

Answer 3

[Kirill Makarov]

Может как вариант z index попробовать , даже не придется лезть в js