search

Home  >  Article  >  Web Front-end  >  Mobile HTML5 simulates long press delete event (with code)

Mobile HTML5 simulates long press delete event (with code)

不言
不言forward
2018-09-30 15:27:265204browse

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>

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

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

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!

html5 css html JS 事件
Statement：
This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvasNext article：How to draw an ellipse with canvas? Summary of methods for drawing ellipses with canvas

Related articles

See more