Mobile HTML5 simulates long press delete event (with code)-H5 Tutorial-php.cn

Mobile HTML5 simulates long press delete event (with code)

不言

Release： 2018-09-30 15:30:27

forward

5206 people have browsed it

The content of this article is about the mobile HTML5 simulated long press deletion event (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Why I wrote this article

I recently received a request to long press a label to display a floating delete button. This requirement is actually very common on apps, but in mobile h5, we don’t have a long press event, so we need to simulate this event ourselves.

The approximate effect is as follows:

Mobile HTML5 simulates long press delete event (with code)

Idea

Abandon the click event and pass judgment The duration of the press determines whether to click or long press
Use touchstart and touchend events
Start a timer in touchstart, such as A long press menu will be displayed after 700ms
Clear this timer in touchend, so that if the press time exceeds 700ms, the long press menu will already be displayed, and clearing the timer will not has any impact; if the pressing time is less than 700ms, the long press menu in touchstart will be cleared before it can be displayed.

From this we can implement simulated long press events.

Upload the code

Please focus on JS. The complete code is posted here for everyone to take a closer look. The code can be copied to see the effect directly
css Most of them just beautify the style, and hide the delete button at the beginning

HTML:

<!DOCTYPE html>
<html>
<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>
        <div id="label">长按我</div>
        <div>删除</div>
    </div>
    <script src="./longpress.js"></script>
</body>
</html>

Copy after login

JS

let timer = null
let startTime = &#39;&#39;
let endTime = &#39;&#39;
const label = document.querySelector(&#39;.label&#39;)
const deleteBtn = document.querySelector(&#39;.delete_btn&#39;)

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

label.addEventListener(&#39;touchend&#39;, function () {
  endTime = +new Date()
  clearTimeout(timer)
  if (endTime - startTime < 700) {
    // 处理点击事件
    label.classList.add(&#39;selected&#39;)
  }
})

Copy after login

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: &#39;&#39;;
    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 after login

ps: touchstart and touchend are only useful on mobile devices. If you want to see code examples, please:

Use chrome
F12 Open the time adjustment window
Switch to the simulated mobile device

Click on the picture below:

Mobile HTML5 simulates long press delete event (with code)

The above is the detailed content of Mobile HTML5 simulates long press delete event (with code). For more information, please follow other related articles on the PHP Chinese website!