JSFiddle - React, Tailwind, and code Playground

by Arnaud

HTML

<body>

  <div id="div1">
    <p id="p1">
      <a id="a1">Capture</a>
    </p>
  </div>


</body>

CSS

* {margin:0;padding:0;}

  h1 {margin:0 0 20px 0;}
  h2 {margin:20px 0 0 0;}
  div {width:300px;height:200px;display:inline-block;vertical-align:middle;background:#333;}
  p {margin:20px;padding:10px;background:#666;text-align:center;}
  a {margin:10px;padding:10px;display:block;background:#999;}
  pre {margin:20px 0;background:#ccc;color:#333;font:0.8em Courier New;}
  .texte {margin:20px 0;padding:10px;background:#333;text-align:left;font-size:0.8em;}

JavaScript

// illustration de la capture
  // on empêche le bouillonnement depuis l'élément central
  document.getElementById('a1').addEventListener('click', function(e) {
    this.style.backgroundColor = 'blue';
    return false;
  }, false);
  // la zone intermédiaire restera grise
  document.getElementById('p1').addEventListener('click', function(e) {
   this.style.backgroundColor = 'red';
  }, false);
  // cette zone accepte la capture d'événement et deviendra jaune
  document.getElementById('div1').addEventListener('click', function(e) {
    this.style.backgroundColor = '#ff0';
  }, true);  // passer en true declenche l'event sur div1