ekashida/index.css

## index.css
div {
  padding: 20px 0;
  margin: 5px 0;
  background-color: lightgreen;
  outline: 1px solid blue;
  display: inline-block;
}
a {
  background-color: yellow;
}

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Events dispatched by Good Guy Mobile Safari on almost-clicks</title>
</head>
<body>

  <p>Check the Mobile Safari console!</p>

  <p>Events dispatched by tapping on each link (yellow area) are expected.</p>

  <p>Events dispatched by tapping just outside each link (green area) are caused by Good Guy Safari.</p>

  <div>
    <a href=https://search.yahoo.com id=delegated>
      Delegated handlers only
    </a>
  </div>

  <div>
    <a href=https://search.yahoo.com id=direct>
      Direct handlers only
    </a>
  </div>

  <div>
    <a href=https://search.yahoo.com id=both>
      Both delegated and direct handlers
    </a>
  </div>

</body>
</html>

## index.js
var delegated = document.querySelector('#delegated');
var direct = document.querySelector('#direct');
var both = document.querySelector('#both');
var body = document.querySelector('body');

['touchstart', 'touchend', 'click'].forEach(function (eventName) {

  // Direct subscription of event handlers
  direct.addEventListener(eventName, function (el) {
    console.log('[#direct] Direct ' + eventName + ' handler');
  });

  both.addEventListener(eventName, function (el) {
    console.log('[#both] Direct ' + eventName + ' handler');
  });

  // Delegated subscription of event handlers
  body.addEventListener(eventName, function (el) {
    if (el.target.id === 'both') {
      console.log('[#both] Delegated ' + eventName + ' handler');
    }
    else if (el.target.id === 'delegated') {
      console.log('[#delegated] Delegated ' + eventName + ' handler');
    }
  });

});

body.addEventListener('click', function (el) {
  // Prevent navigation
  el.preventDefault();
});
	div {
	padding: 20px 0;
	margin: 5px 0;
	background-color: lightgreen;
	outline: 1px solid blue;
	display: inline-block;
	}
	a {
	background-color: yellow;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Events dispatched by Good Guy Mobile Safari on almost-clicks</title>
	</head>
	<body>

	<p>Check the Mobile Safari console!</p>

	<p>Events dispatched by tapping on each link (yellow area) are expected.</p>

	<p>Events dispatched by tapping just outside each link (green area) are caused by Good Guy Safari.</p>

	<div>
	<a href=https://search.yahoo.com id=delegated>
	Delegated handlers only
	</a>
	</div>

	<div>
	<a href=https://search.yahoo.com id=direct>
	Direct handlers only
	</a>
	</div>

	<div>
	<a href=https://search.yahoo.com id=both>
	Both delegated and direct handlers
	</a>
	</div>

	</body>
	</html>
	var delegated = document.querySelector('#delegated');
	var direct = document.querySelector('#direct');
	var both = document.querySelector('#both');
	var body = document.querySelector('body');

	['touchstart', 'touchend', 'click'].forEach(function (eventName) {

	// Direct subscription of event handlers
	direct.addEventListener(eventName, function (el) {
	console.log('[#direct] Direct ' + eventName + ' handler');
	});

	both.addEventListener(eventName, function (el) {
	console.log('[#both] Direct ' + eventName + ' handler');
	});

	// Delegated subscription of event handlers
	body.addEventListener(eventName, function (el) {
	if (el.target.id === 'both') {
	console.log('[#both] Delegated ' + eventName + ' handler');
	}
	else if (el.target.id === 'delegated') {
	console.log('[#delegated] Delegated ' + eventName + ' handler');
	}
	});

	});

	body.addEventListener('click', function (el) {
	// Prevent navigation
	el.preventDefault();
	});