long-press

Example of long-press event

HTML

<div class="dock-item" data-long-press-delay="500">Press and hold me for .5s</div>
<div class="dock-item">Press and hold me for 1.5s</div>
<div class="dock-item" data-long-press-delay="5000">Press and hold me for 5s</div>

CSS

.dock-item {
  font-size: 14px;
  font-family: arial;
  display: inline-block;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  width: 70px;
  height: 70px;
  border-radius: 3px;
  text-align: center;
  user-select: none;
}

@keyframes jiggle {
  0% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}

.dock-item[data-editing="true"] {
  animation: jiggle 0.2s infinite;
  border: 1px solid #aaa;
  box-shadow: 0 0 1px rgba(0,0,0,.85);
}

JavaScript

// listen for long-press events
document.addEventListener('long-press', function(e) {
  e.target.setAttribute('data-editing', 'true');
});










/*!
 * long-press.js
 * Pure JavaScript long-press event
 * https://github.com/john-doherty/long-press
 * @author John Doherty <www.johndoherty.info>
 * @license MIT
 */
!function(t,e){"use strict";function n(){this.dispatchEvent(new CustomEvent("long-press",{bubbles:!0,cancelable:!0})),clearTimeout(o),console&&console.log&&console.log("long-press fired on "+this.outerHTML)}var o=null,u="ontouchstart"in t||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0,s=u?"touchstart":"mousedown",i=u?"touchcancel":"mouseout",a=u?"touchend":"mouseup",c=u?"touchmove":"mousemove";"initCustomEvent"in e.createEvent("CustomEvent")&&(t.CustomEvent=function(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var o=e.createEvent("CustomEvent");return o.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),o},t.CustomEvent.prototype=t.Event.prototype),e.addEventListener(s,function(t){var e=t.target,u=parseInt(e.getAttribute("data-long-press-delay")||"1500",10);o=setTimeout(n.bind(e),u)}),e.addEventListener(a,function(t){clearTimeout(o)}),e.addEventListener(i,function(t){clearTimeout(o)}),e.addEventListener(c,function(t){clearTimeout(o)})}(this,document);