JSFiddle - React, Tailwind, and code Playground

by crowjonah

HTML

<div class="wrapper">
<!--   <svg width="350" height="350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>circle within a link</title>
  Added cursor="pointer" to force a cursor in Chrome
  <circle stroke="#88CDD5" fill="#D79CFD" stroke-width="30" cx="160" cy="160" r="140" cursor="pointer"></circle> 
  </svg> -->
<div style='display:none'>
  <svg xmlns="http://www.w3.org/2000/svg">
    <defs>
      <symbol id="chevron" viewBox="0 0 16 16">
        <path d="M10.217 8l-6-6h2.766l6 6-6 6H4.217z"></path>
      </symbol>
    </defs>
  </svg>
</div>
<svg class="chevron" style="width:32px;height:32px;">
  <use xlink:href="#chevron"/>
</svg>

<div class="display-panel">
  <pre id="output"></pre>
</div>
</div>

CSS

body {
  font-family: sans-serif;  
}

label {
  font-weight: bold;
}

.wrapper {
   display: flex;
   background: red;
}
.blue {
  background: blue;
}

.display-panel {
  width: 300px;
}

#output {
  background: hsla(276, 96%, 80%, .5);
  height: 300px;
  overflow-y: scroll;
  padding: 1rem;
}

button {
  background: #88cdd5;
  border: 0;
  color: #222;
  font-size: 18px;
  padding: .5em 1em;
}

JavaScript

const chevron = document.querySelector('.chevron');
const output = document.getElementById('output');
const wrapper = document.querySelector('.wrapper')


/* const useEventType = (typeof window.PointerEvent === 'function') ? 'pointer' : 'mouse'; */
// const listeners = ['click','touchstart','touchend',`${useEventType}enter`,`${useEventType}leave`];
const listeners = ['mouseout', 'mouseenter'];

const evtHandler = (event) => {
  event.preventDefault();
  // console.log('event', event)
  let newlog = event.target.tagName + ': ' + event.type;
  if (event.relatedTarget) {
  	newlog += ' contains ' + event.relatedTarget.tagName + ': ' + event.target.contains(event.relatedTarget);
    console.log(newlog, 'contains', event.target.contains(event.relatedTarget), 'event.relatedTarget', event.relatedTarget);
  }
  if (event.type === 'mouseenter') {  	
    	wrapper.classList.add('blue');  	
  }
  else if (event.type === 'mouseleave') {
  	if (event.relatedTarget && event.target.contains(event.relatedTarget)) {
    
  	} 
  	else {
    	wrapper.classList.remove('blue')
    }
  }
  const evtype = document.createTextNode(newlog + '\n');
  output.appendChild(evtype);
}

wrapper.addEventListener('mouseenter', evtHandler);
wrapper.addEventListener('mouseleave', evtHandler);

//listeners.map((etype) => {
//   wrapper.addEventListener(etype, evtHandler);
//});