모바일 HTML5는 길게 누르기 삭제 이벤트를 시뮬레이션합니다(코드 포함).-H5 튜토리얼-php.cn

이 글을 쓴 이유

Idea

코드 업로드

HTML:

CSS

집

웹 프론트엔드

H5 튜토리얼

모바일 HTML5는 길게 누르기 삭제 이벤트를 시뮬레이션합니다(코드 포함).

不言

Sep 30, 2018 pm 03:27 PM

html5

본 글의 내용은 모바일 HTML5 길게 누르기 삭제 이벤트(코드 포함)에 관한 내용입니다. 참고가 필요한 친구들이 참고하시면 좋을 것 같습니다.

이 글을 쓴 이유

최근 라벨을 길게 눌러 플로팅 삭제 버튼을 표시해달라는 요청을 받았습니다. 이 요구 사항은 실제로 앱에서는 매우 일반적이지만 모바일 h5에서는 길게 누르기 이벤트가 없으므로 이 이벤트를 직접 시뮬레이션해야 합니다.

대략적인 효과는 다음과 같습니다.

모바일 HTML5는 길게 누르기 삭제 이벤트를 시뮬레이션합니다(코드 포함).

Idea

클릭 이벤트를 중단하고 누르는 시간을 판단하여 클릭할지 길게 누를지 결정하세요
터치스타트, 터치엔드 이벤트를 활용하세요
In touchstart 터치엔드에서 타이머를 시작합니다. 예를 들어 길게 누르기 메뉴는 700ms 후에 표시됩니다.
터치엔드에서 이 타이머를 지우므로 누르는 시간이 700ms를 초과하면 길게 누르기 메뉴가 이미 표시됩니다. 타이머를 지워도 아무런 영향을 미치지 않습니다. 누르는 시간이 700ms 미만인 경우 터치스타트의 길게 누르기 메뉴가 표시되기 전에 지워집니다.

이로부터 시뮬레이션된 길게 누르기 이벤트를 구현할 수 있습니다.

코드 업로드

모든 사람이 자세히 살펴볼 수 있도록 전체 코드가 여기에 게시되어 있습니다. 코드를 복사하여 직접 확인할 수 있습니다.
대부분의 CSS는 스타일을 아름답게 하기 위한 것입니다. 시작 부분도 있습니다. 삭제 버튼 숨기기

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 및 touchend는 모바일 장치에서만 유용합니다. 코드 예제를 보려면 다음을 참조하세요.