Why write this article

Recently there was a request to long press a TAB to display a dangling delete button. In fact, this requirement is very common in app, but in mobile H5, we do not have the event of long press, so we need to simulate this event ourselves.

The general effect is as follows:

Ps: : In order to make a GIF and also off the app, also have to email to the computer, brain pain.

Train of thought

  • Discard the click event and determine whether to click or hold by judging how long it takes to press
  • Use the TouchStart and TouchEnd events
  • Start a timer in TouchStart, such as displaying a long press menu after 700ms
  • Clear the timer in TouchEnd so that if you hold it down for more than 700ms, the long press menu is already displayed and clearing the timer doesn’t have any effect; If the pressing time is less than 700ms, the long press menu in TouchStart is cleared before it can be displayed.

From this we can implement the simulated long-press event.

In the code

Please focus on JS, here posted the complete code is for the convenience of everyone to see carefully, the code can be copied directly to see the effect of CSS most just do beautification of the style, there is a delete button to hide at the beginning

HTML:

<! DOCTYPE html> <html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="./longpress.css" />
</head>
<body>
	<div class="container">
		<div class="label" id="label"> long press me </div> <div class="delete_btn"> Delete </div> </div> <script SRC ="./longpress.js"></script>
</body>
</html>
Copy the code

JS

let timer = null
let startTime = ' '
let endTime = ' '
const label = document.querySelector('.label')
const deleteBtn = document.querySelector('.delete_btn')

label.addEventListener('touchstart'.function () {
  startTime = +new Date()
  timer = setTimeout(function () {
    deleteBtn.style.display = 'block'
  }, 700)
})

label.addEventListener('touchend'.function () {
  endTime = +new Date()
  clearTimeout(timer)
  if(endtime-startTime < 700) {// Handle click events label.classlist.add ('selected')}})Copy the code

CSS

.container {
	position: relative;
	display: inline-block;
	margin-top: 50px;
}

.label {
	display: inline-block;
	box-sizing: border-box;
	width: 105px;
	height: 32px;
	line-height: 32px;
	background-color: #F2F2F2;
	color: #5F5F5F;
	text-align: center;
	border-radius: 3px;
	font-size: 14px;
}

.label.selected {
	background-color: #4180cc;
	color: white;
}

.delete_btn {
	display: none;
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%) translateY(-100%);
	color: white;
	padding: 10px 16px;
	background-color: rgba(0, 0, 0, .7);
	border-radius: 6px;
	line-height: 1;
	white-space: nowrap;
	font-size: 12px;
}

.delete_btn::after {
	content: ' ';
	width: 0;
	height: 0;
	border-width: 5px;
	border-style: solid;
	border-color: rgba(0, 0, 0, .7) transparent transparent transparent;
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
}

Copy the code

Ps: TouchStart and TouchEnd are only available on mobile devices.

  • With chrome
  • F12 Open the timing window
  • To switch to the analog mobile device, click the picture below:

The last

Welcome to exchange ~