ホーム>Web デザインのチュートリアル>HTMLチュートリアル

モバイル端末上でHTML5で長押しイベントをシミュレートする実装方法

著者：Eve Cole 更新時間：2025-01-18 17:24:01

この記事を書く理由

最近、特定のラベルを長押しするとフローティング削除ボタンを表示して削除したいというリクエストを受けました。この要件は実際にはアプリでは非常に一般的ですが、モバイル H5 では長押しイベントがないため、このイベントを自分でシミュレートする必要があります。

おおよその効果は以下の通りです。

ps: GIF を作成するには、アプリをダウンロードし、電子メールでコンピュータに送信する必要がありました。頭が痛くなりました。 。

アイデア

  • クリックイベントは諦めて、押し続けた長さを判断してクリックするか長押しするかを決定します。
  • touchstart イベントと touchend イベントの使用
  • 700ms後に長押しメニューを表示するなど、タッチスタートでタイマーを開始します
  • touchend でこのタイマーをクリアすると、押し時間が 700ms を超えると長押しメニューが表示され、押し時間が 700ms 未満の場合はタイマーをクリアしても touchstart の長押しメニューが表示されなくなります。表示される前にクリアされてしまいました。

これから、シミュレートされた長押しイベントを実装できます。

アップコード

请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果

CSS のほとんどはスタイルを美しくするためのもので、最初は削除ボタンを非表示にします。

HTML: 

 <!DOCTYPE html><html lang=ja><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width、initial-scale=1.0> <meta http-equiv=X-UA -互換性のあるコンテンツ=ie=edge> <title>ドキュメント</title> <link rel=stylesheet type=text/css href=./longpress.css /></head><body> <div class=container> <div class=label id=label>長押し</div> <div class=delete_btn>削除</div> </div> <script src= ./longpress.js></script></body></html>

JS 

 let timer = nulllet startTime = ''let endTime = ''const label = document.querySelector('.label')const deleteBtn = document.querySelector('.delete_btn')label.addEventListener('touchstart', function () { startTime = +new Date() タイマー = setTimeout(function () { deleteBtn.style.display = 'block' }, 700)})label.addEventListener('touchend', function () { endTime = +new Date() clearTimeout(timer) if (endTime - startTime < 700) { // クリック イベントを処理します label.classList.add('selected' ) }})

CSS 

 .container { 位置: 相対; マージン-トップ: 50px; }.label { 表示: インラインブロック; 幅: 105 ピクセル; 行の高さ: 32 ピクセル; 背景色: #F2F2F2; テキスト整列: 中心;フォントサイズ: 14px;}.label.selected {背景色: #4180cc; カラー: 白;}.delete_btn { 表示: なし; 左: 50%; 50%) 変換 Y(-100%); カラー: 白 パディング: 10px 16px; 0, .7); ボーダー半径: 6px; 行の高さ: 1; フォントサイズ: 12px; }.delete_btn::after { コンテンツ: '';境界線の幅: 5px; 境界線の色: rgba(0, 0, 0, .7) 透明な透明な位置: 絶対-9px; 左: 50%; 変換: 変換X(-50%);}

ps: touchstart と touchend はモバイル デバイスでのみ役立ちます。コード例を参照したい場合は、次のリンクを参照してください。

  1. クロムを使用する
  2. F12 で時刻調整ウィンドウが開きます
  3. シミュレートされたモバイル デバイスに切り替える

つまり、下の画像をクリックします。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。

関連記事