JSFiddle - React, Tailwind, and code Playground

HTML

<div class='testDiv' tabIndex=0>
  Test
</div>
<div class='testDiv second' tabIndex=0>
  Test2
</div>

CSS

div {
  height: 150px;
  width: 250px;
  border: 2px solid purple;
  background: #c486d0;
  color: white;
  text-align: center;
  line-height: 150px;
}

JavaScript

var d = document.getElementsByClassName('testDiv');

for (var i = 0; i < d.length; i++) {
  d[i].addEventListener('click', function(e) { 
  		//alert('hi');
      e.target.style.backgroundColor = 'blue';  //this shouldn't happen if not valid
  });
  d[i].addEventListener('blur', function(e) { 
      //alert('I\'m blurred now');
      var valid = false
      if (!valid) {
      	//e.stopImmediatePropagation(); //didn't work
        console.log('not valid');
        //return false;  //didn't work
        
        /***  if its not valid we want to cancel the click event ***/
      }
      else {
	     	e.target.style.backgroundColor = '#c486d0';
  	    e.target.innerHTML = 'Blurred';
      }
   });
}