The order of events by mouse or touch

index.html

<h1>TouchEvent と MouseEventの同時使用テスト</h1>
<p>Push F12 to open console and to read event logs.</p>

<p>
  <a id="javabo" class="redjavabo" href="javascript:void(0);" draggable="false">
    無料タッチイベント と マウスイベントのテスト
  </a>
</p>

<form>
  <input type="checkbox" id="toggle-prevention">
  <label for="toggle-prevention">Prevent default events</label> 
</form>

<p>ログ(重複なし最新10個まで): </p>
<div id="status"></div>

<hr>
<div>
  <a href="https://github.com/arigato-java/java_images/tree/master/src/com/java/images/css">
    Original code is here.
  </a> 
</div>

script.babel

const $ = document.getElementById.bind(document);
const j = $('javabo');
let stat = new Array();
const maxLog = 10;
      
const event = (mark) => (e) => {
  console.log(`${mark} ${e.type}: ${e.target.id}`);
  
  // イベントの表示
  if (stat[stat.length-1] !== mark) {
    stat.push(mark);    
    stat.splice(0, Math.max(0, stat.length-maxLog));    
  }
  $('status').innerText = stat.join(' > ');
  
  // 続くイベント無視する場合
  if ($('toggle-prevention').checked) {
    e.preventDefault();
  }
};

j.addEventListener('mousedown', event('💻👇'));
j.addEventListener('mousemove', event('💻💨'));
j.addEventListener('mouseup', event('💻👆'));

j.addEventListener('touchstart', event('📱👇'));
j.addEventListener('touchmove', event('📱💨'));
j.addEventListener('touchend', event('📱👆'));

j.addEventListener('click', event('🖱️💥'));

window.addEventListener('mouseup', event('📄👆'));

style.css

/* JavaButton.css -*- coding: utf-8 -*- */

/* ここからカット */
/* Crimson Javabo */
a.redjavabo {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	font-family: 'ＭＳ Ｐゴシック', Osaka, sans-serif;
	font-weight: bold;
	background-color: #f00;
	border-radius: .5em;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 2em;
	padding-right: 2em;
	min-width: 11em;
	background-image:
    linear-gradient(
      to bottom, 
      rgba(255,255,255,.17), 
      rgba(255,255,255,.23) 40%, 
      transparent 40%),
		linear-gradient(to bottom, #ff8791, #b50010);
	background-size: auto, auto;
	background-position: 0px 0px, 0px 0px;
	text-align: center;
	margin: .5em;
}

a.redjavabo:active {
	box-shadow: none;
	background-image: linear-gradient(to top, #aa3030, #b50010);
}

/* Royal Blue Javabo */
a.bluejavabo {
	display: inline-block;
	padding-top: .5em;
	padding-bottom: .5em;
	padding-left: 2em;
	padding-right: 2em;
	min-width: 11em;
	text-decoration: none;
	color: #fff;
	font-family: 'ＭＳ Ｐゴシック', Osaka, sans-serif;
	font-weight: normal;
	background-color: #007;
	border-radius: .8em;
	border: 2px solid #333;
	background-color: #007;
	background-image:
    linear-gradient(to bottom,
      rgb(125,227,255) 2px,
      rgb(39,181,247) 2px, 
      rgb(7,123,242) 33%, 
      rgb(0,32,115) 50%,
      rgb(0,34,70));
	text-align: center;
	margin: .5em;
}
/* ここまでカット */


/* pervasive */
body {
	font-family: sans-serif;
}

the-order-of-events-by-mouse-or-touch.markdown

The order of events by mouse or touch

A Pen by TOBY on CodePen.

License.