Tôi có một trang trình bày bằng cách sử dụng javascript vanilla để sử dụng trên điện thoại, nhưng cho đến nay tất cả các thử nghiệm của tôi đã dẫn đến trình duyệt di động bỏ qua lần nhấn đầu tiên (đã thử cả hai touchstart & nhấp vào dưới dạng sự kiện) . Bắt đầu với lần nhấn thứ hai, nó hoạt động tốt đẹp với mỗi lần chạm tiếp theo.Vanilla javascript bỏ qua tab đầu tiên/nhấp vào
Khi mở & đóng menu là chức năng javascript duy nhất trên các trang, tôi không muốn tải một thư viện lớn, tôi muốn giữ cho nó đơn giản và nhỏ. Mã của tôi bên dưới:
var b = document.getElementById('menubtn');
b.addEventListener('touchstart', function (e) {
var n = document.getElementById('nav');
var ns = n.style.left;
if (ns == "-600px") {
n.style.left = "0px";
} else {
n.style.left = "-600px";
}
e.preventDefault();
});
Bất kỳ cách nào để dễ dàng loại bỏ nhu cầu này để nhấp đúp lần đầu tiên?
Trong thư mục fwiw, đây là thiết kế đáp ứng, với menu điều hướng trong cột trên màn hình lớn và một trang chiếu trên điện thoại.
Edit: Giải quyết được vấn đề
Tiếp theo qua Matt Styles bình luận, tôi đã cố gắng sử dụng classList.toggle và nó giải quyết vấn đề này. Phiên bản cuối cùng là dưới đây:
var b = document.getElementById('menubtn');
var n = document.getElementById('nav');
b.addEventListener('touchstart', function() {
n.classList.toggle('shwmenu');
setTimeout(function() {
b.classList.toggle('shwmenu');
}, 500);
});
Tôi đã thêm mã menubtn bị trì hoãn để chuyển đổi giữa các trạng thái đóng và mở.
Điều này không trực tiếp trả lời câu hỏi của bạn vì vậy tôi sẽ để lại nhận xét đó, nhưng tại sao bạn không sử dụng 'touchstart' để bật/tắt lớp học? [thành phần.classlist.toggle] (http://caniuse.com/#feat=classlist) có hỗ trợ gần như phổ biến cho các thiết bị cảm ứng, mặc dù nếu nó đáp ứng với công việc trên máy tính để bàn, thì sự kiện nhấp chuột có thể an toàn hơn và được hiểu ở mọi nơi trong mã của bạn sẽ chạy. Ngoài ra, phần tử điều hướng của bạn sẽ nằm ngoài phạm vi đóng của bạn, theo cách đó bạn không truy vấn DOM với từng sự kiện. –
@MattStyles - Tôi đã thử classList.toggle và nó hoạt động như một nét duyên dáng. Cám ơn vì sự gợi ý – Tom