ทำไมถึงเขียนบทความนี้
ฉันเพิ่งได้รับคำขอให้แสดงและลบปุ่มลบแบบลอยโดยการกดป้ายกำกับบางอันค้างไว้ จริงๆ แล้วข้อกำหนดนี้เป็นเรื่องปกติทั่วไปในแอป แต่ใน h5 บนมือถือ เราไม่มีเหตุการณ์ที่ต้องกดยาว ดังนั้นเราจึงจำเป็นต้องจำลองเหตุการณ์นี้ด้วยตนเอง
ผลโดยประมาณมีดังนี้:
ป.ล. ในการทำ gif ฉันดาวน์โหลดแอปและต้องส่งไปที่คอมพิวเตอร์ทางอีเมล ฉันปวดหัว -
ไอเดียจากนี้เราสามารถใช้เหตุการณ์การกดแบบยาวจำลองได้
อัพโค้ด 请把重点放在JS上，这里贴出来完整的代码是为了方便大家看个仔细，代码可以拷贝直接看效果
CSS ส่วนใหญ่มีไว้เพื่อตกแต่งสไตล์ให้สวยงาม และเริ่มซ่อนปุ่มลบ
HTML:
<!DOCTYPE html><html lang=en><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>
จส
ให้ตัวจับเวลา = nulllet startTime = ''ให้ endTime = ''const label = document.querySelector('.label')const DeleteBtn = document.querySelector('.delete_btn')label.addEventListener('touchstart', function () { startTime = + วันที่ใหม่ () ตัวจับเวลา = setTimeout (ฟังก์ชั่น () { DeleteBtn.style.display = 'บล็อก' }, 700)})label.addEventListener('touchend', function () { endTime = +new Date() clearTimeout(timer) if (endTime - startTime < 700) { // จัดการเหตุการณ์การคลิก label.classList.add('selected' ) }})ซีเอสเอส
.container { ตำแหน่ง: สัมพันธ์กัน; display: inline-block; margin-top: 50px;}.label { display: inline-block; box-sizing: border-box; ; สีพื้นหลัง: #F2F2F2; สี: #5F5F5F; ขนาดตัวอักษร: 14px;}.label.selected { สีพื้นหลัง: #4180cc; color: white;}.delete_btn { display: none; top: -8px; 50%) แปล (-100%); สี: สีขาว; การขยาย: 10px 16px; สีพื้นหลัง: rgba (0, 0, 0, .7); border-radius: 6px; line-height: 1; white-space: nowrap; ความกว้างของเส้นขอบ: 5px; border-style: solid; border-color: rgba (0, 0, 0, .7) โปร่งใส โปร่งใส ด้านล่าง: -9px; ซ้าย: 50%; แปลง: แปล X(-50%);}PS: Touchstart และ Touchend มีประโยชน์เฉพาะบนอุปกรณ์เคลื่อนที่เท่านั้น หากคุณต้องการดูตัวอย่างโค้ด โปรด:
นั่นคือคลิกที่ภาพด้านล่าง:
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network