long-press

Example of long-press event

by abubelinha

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>
<br>
<div id="divspans">
<span class="exe" name="mytext1" title="my inner element 1" id="1">
<i><b>I like</b> to be long-pressed !!</i></span><br>
<span class="exe" name="mytext2" title="my inner element 2" id="2">
<i><b>I love</b> to be long-pressed !!</i></span><br>
<span class="exe" name="mytext3" title="my inner element 3" id="3">
<i><b>I want</b> to be long-pressed !!</i></span>
</div>
<span class="exe" name="mytext123" title="my element outside div" id="123">
<i><b>I ALSO want</b> to be long-pressed !!</i></span>

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);
}

.exe {
  background: lightgrey; 
  cursor: pointer;
 }
 b {
   color: red;
   pointer-events: none;
 }
 i {
   color: blue;
   pointer-events: none;
 }

JavaScript

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

var exes = document.querySelectorAll(".exe");

document.getElementById("123").addEventListener('long-press', function(e) {
  e.target.setAttribute('data-editing', 'true');
  alert(this.title + " was long-pressed!!");
  console.log(this);
});

document.getElementById("divspans").addEventListener('long-press', function(e) {
  console.log(e.target);
  //console.log(this);
});





/*!
 * long-press-event - v2.2.0
 * Pure JavaScript long-press-event
 * https://github.com/john-doherty/long-press-event
 * @author John Doherty <www.johndoherty.info>
 * @license MIT
 */
!function(e,t){"use strict";var n=null,a="ontouchstart"in e||navigator.MaxTouchPoints>0||navigator.msMaxTouchPoints>0,i=a?"touchstart":"mousedown",o=a?"touchend":"mouseup",m=a?"touchmove":"mousemove",u=0,r=0,s=10,c=10;function l(i){v(i);var m=i.target,u=parseInt(m.getAttribute("data-long-press-delay")||"1500",10);n=function(t,n){if(!(e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame&&e.mozCancelRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame))return e.setTimeout(t,n);var a=(new Date).getTime(),i={},o=function(){(new Date).getTime()-a>=n?t.call():i.value=requestAnimFrame(o)};return i.value=requestAnimFrame(o),i}(function(e){v();var n=a?e.touches[0].clientX:e.clientX,i=a?e.touches[0].clientY:e.clientY;this.dispatchEvent(new CustomEvent("long-press",{bubbles:!0,cancelable:!0,detail:{clientX:n,clientY:i}}))&&t.addEventListener(o,function e(n){t.removeEventListener(o,e,!0),function(e){e.stopImmediatePropagation(),e.preventDefault(),e.stopPropagation()}(n)},!0)}.bind(m,i),u)}function v(t){var...