Link to sectionExample

by larsolesimonsen

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent -->

<div id="box1" style="height: 100px; width: 100px;background: gray;">
  <div id="box11" style="height: 20px; width: 20px; background: #aaa;">
    
  </div>
  <div id="box12" style="height: 20px; width: 20px; background: #aaa; display: none;">
    
  </div>
</div>
<br>
<br>
<div id="box2" style="height: 100px; width: 100px;background: gray;">

</div>
<br>
<br>
<button id="button">Click me</button>
<button id="reset-button">Reset</button>

JavaScript

// Finds element and simulates mousedown event on it
function simulateClick() {
  var evt = new MouseEvent("mousedown", {
    bubbles: true,
    cancelable: true
  });
  var cb = document.getElementById("box11"); //element to click on
  cb.dispatchEvent(evt);
}

// React to button being pressed by user
document.getElementById("button").addEventListener('click', simulateClick);

document.getElementById("reset-button").addEventListener('click', function(evt) {
  document.getElementById("box1").style.background = 'gray';
  document.getElementById("box11").style.background = '#aaa';
});


// React to simulated mousedown event
document.getElementById("box1").addEventListener('mousedown', function(evt) {
  evt.currentTarget.style.background = 'green';
});