11

With Javascript it is possible to stop propagation with code? E.g.

  function func1(event) {
      alert("DIV 1");
    if (document.getElementById("check").checked) {
      event.stopPropagation();
    }
  }

Is it also possible to stop propagation by CSS?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Max Lindner
  • 171
  • 1
  • 1
  • 7
  • Note that you had propagation spelled correctly in your code and the tag, and possible spelled correctly in the title; please take more care in the future. – jonrsharpe Feb 19 '19 at 10:43
  • 1
    No, it is not possible – GolezTrol Feb 19 '19 at 10:43
  • 1
    CSS can do a bit of stuff to not let certain events happen in the first place (like `pointer-events: none`) - but it can not really stop event propagation, that is not even remotely it’s job to begin with. – 04FS Feb 19 '19 at 10:45
  • I have wondered the same, and have attempted the same, but truth be told CSS works on different thread then JS. Although you can trigger events in limited format e.g. a[target=_blank] { background-color: yellow; } – Syed Apr 27 '21 at 20:07
  • I have had fun with it and can make some awesome UI effects depending upon how much creative risk one takes e.g. a[target=_blank]:hover:after { background-color: yellow; content: attr(message); } – Syed Apr 27 '21 at 20:13
  • however, when this even happens it cannot stop propagation, to be honest its not really propagating its more of reflecting state i.e. hover vs not in hover. where as Js events are more of on i.e. on hover and not on hover. If your intention is to stop the on event propagation then statement by @04FS is correct - this is not css envisions it self to do at all. It is more at home with painting the DOM in its various states everything else is not its headache. So no it cannot. – Syed Apr 27 '21 at 20:18

2 Answers2

3

You can use this CSS simple code:

.disabled-button{
    pointer-events: none;
}
Saeed sdns
  • 804
  • 7
  • 17
  • This not totally works as expected. For example: if you put pointer-events: none on a parent element, and then pointer-events: auto, on it's child, then triggering event on a child will propagate it to the parent and even more downwards. – tikej Jun 14 '23 at 15:27
-2

Sort-of, in some browsers. You can use the 'all' property to reset an element back to initial values. That should mean the initial values inherit down from there.

Unfortunately it's not supported by IE and Edge though. https://www.caniuse.com/#search=all

Brett
  • 843
  • 1
  • 7
  • 18
  • And what exactly does this have to do with event propagation …? – 04FS Feb 19 '19 at 10:51
  • 99% propagation involves bubbling (i.e. up) plus inheritance is nothing like events – zer00ne Feb 19 '19 at 10:52
  • Looks like I misunderstood the question. I took the generic definition of propagation as opposed to specifically event propagation. – Brett Feb 19 '19 at 10:53