JSFiddle - React, Tailwind, and code Playground

by G Harbs

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>

CSS

#div1{
  position:absolute;
  top:10px;
  background-color:orange;
  height:20px;
  width:20px;
}
#div2{
    position:absolute;
  top:50px;
  background-color:red;
  height:20px;
  width:20px;
}
#div3{
  position:absolute;
  top:90px;
  background-color:purple;
  height:20px;
  width:20px;
}

#div4{
  position:absolute;
  top:10px;
  left:50px;
  background-color:orange;
  height:20px;
  width:20px;
}
#div5{
    position:absolute;
  top:50px;
  left:50px;
  background-color:red;
  height:20px;
  width:20px;
}
#div6{
  position:absolute;
  top:90px;
  left:50px;
  background-color:purple;
  height:20px;
  width:20px;
}

JavaScript

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
var div5 = document.getElementById("div5");
var div6 = document.getElementById("div6");

div1.onmousedown = function(){alert("Hi from div 1")};
div2.onmousedown = function(){alert("Hi from div 2")};
div3.onmousedown = function(){alert("Hi from div 3")};
div4.onmousedown = function(){alert("Hi from div 4")};
div5.onmousedown = function(){alert("Hi from div 5")};
div6.onmousedown = function(){alert("Hi from div 6")};

div1.style.pointerEvents = "none";
div2.style["pointerEvents"] = "none";
div3.style["pointer-events"] = "none";