لماذا أكتب هذا المقال
لقد تلقيت مؤخرًا طلبًا لعرض وحذف زر الحذف العائم من خلال الضغط لفترة طويلة على تسمية معينة. هذا المطلب شائع جدًا في الواقع على التطبيقات، ولكن في الهاتف المحمول h5، ليس لدينا حدث صحفي طويل، لذلك نحتاج إلى محاكاة هذا الحدث بأنفسنا.
التأثير التقريبي هو كما يلي:
ملاحظة: لكي أتمكن من إنشاء صورة GIF، قمت بتنزيل التطبيق واضطررت إلى إرساله إلى الكمبيوتر عبر البريد الإلكتروني. رأسي يؤلمني. .
أفكارمن هذا يمكننا تنفيذ محاكاة الأحداث الصحفية الطويلة.
رمز يصل 请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果
معظم ملفات CSS تهدف فقط إلى تجميل النمط وإخفاء زر الحذف في البداية.
HTML:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, virtual-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>
شبيبة
دع الموقت = nulllet startTime = ''let endTime = ''const label = document.querySelector('.label')constdeleteBtn = document.querySelector('.delete_btn')label.addEventListener('touchstart', function () { startTime = +مؤقت التاريخ () الجديد = 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 { الموضع: نسبي؛ العرض: كتلة مضمّنة؛ ارتفاع الخط: 32 بكسل؛ لون الخلفية: #F2F2F2 اللون: #5F5F5F؛ حجم الخط: 14 بكسل؛}.label.selected { لون الخلفية: #4180cc؛ اللون: أبيض؛}.delete_btn { العرض: لا شيء؛ الموضع: أعلى: -8 بكسل؛ تحويل: ترجمة X (-) 50%) ترجمة Y(-100%)؛ اللون: أبيض الحشو: 10 بكسل 16 بكسل؛ 0, .7); عرض الحدود: 5 بكسل؛ نمط الحدود: صلب؛ لون الحدود: rgba(0, 0, 0, .7) شفاف شفاف الموضع: مطلق؛ -9 بكسل؛ اليسار: 50%؛ تحويل: TranslateX(-50%)؛}ملاحظة: إن touchstart وtouchend مفيدان فقط على الأجهزة المحمولة. إذا كنت تريد الاطلاع على أمثلة التعليمات البرمجية، فيرجى:
يعني اضغط على الصورة أدناه:
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.