Touch & Mouse Events

by gocode

HTML

<div id="target">

</div>

CSS

#target {
  width: 300px;
  height: 150px;
  background: white;
  border: 2px solid black;
}

JavaScript

function log(message) {
	var div = document.createElement("div");
  div.innerText = message;
	document.body.appendChild(div);
};

var target = document.getElementById("target");

["mousedown", "mouseup", "click", "touchstart", "touchend"].forEach(function(eventName) {
	target.addEventListener(eventName, function(e) {
  	log(eventName);
  });
});