2016-12-23 21 views
6

Thường thì tôi đang gặp phải một menu khi di chuột và cho menu thiết bị di động sẽ mở khi nhấp. Bây giờ, ví dụ: xem xét sau Ví dụ:CSS: di chuột /: tập trung vào sự kiện nhấp trên thiết bị cảm ứng (di động)

.btn { 
 
    width: 200px; 
 
    background-color: #333; 
 
    color: white; 
 
    padding: 10px; 
 
} 
 
.menu { 
 
    display: none; 
 
    padding: 15px; 
 
} 
 
.btn:hover .menu { 
 
    display: block; 
 
} 
 
.btn:focus .menu { 
 
    display: block; 
 
}
<div class="btn"> 
 
    Button 
 
    <div class="menu">I am menu</div> 
 
</div>

Bây giờ điều này tự động hoạt động trên các thiết bị di động bởi vì trạng thái hover là dính trên các thiết bị cảm ứng. Nhưng liệu hack này có thể áp dụng cho tất cả các thiết bị cảm ứng không? Đó là, nó có đáng để mạo hiểm? Sẽ có một số thiết bị cảm ứng không có trạng thái di chuột dính? Rõ ràng là thay thế là gán các sự kiện chạm/bấm với JavaScript trên các thiết bị cảm ứng nhưng điều này có vẻ dư thừa vì tôi chưa thấy bất kỳ thiết bị cảm ứng nào không có trạng thái di chuột dính?

Vì vậy, câu hỏi của tôi là:

Is it okay để sử dụng trạng thái hover hack hay tôi nên sử dụng các sự kiện JavaScript để làm cho nó nhiều đạn bằng chứng?

+0

Tôi muốn đi với nó, nên được tốt. – Roberrrt

+1

@Roberrrt Thực sự, tôi luôn sử dụng cách tiếp cận này trong công việc trước đây của mình nhưng bây giờ tôi nhận được chút nghi ngờ. – user31782

+0

Nên ổn. –

Trả lời

3

Tôi muốn nói rằng bạn chỉ cần gắn bó với css cho hầu hết các trình di chuyển, miễn là bạn đồng ý với menu hoặc bất kỳ thứ gì đóng khi người dùng nhấp vào một phần tử riêng biệt.

Tôi không biết bất kỳ trình duyệt dành cho thiết bị di động nào không tuân thủ hành vi này, ít nhất không phải là những hành vi chính. Nếu bất kỳ trình duyệt chính nào bị loại bỏ, một phần lớn của web di động sẽ cần được xây dựng lại.

Có thể an toàn!

+0

Vâng, bạn có một điểm hợp lệ. Rất nhiều trang web sẽ hoạt động không chính xác nếu hành vi này không được một số thiết bị hoặc trình duyệt tôn trọng. – user31782

2

Theo kinh nghiệm của tôi, điều này không thực sự là một hack nhưng nhiều hơn một cách để bắt chước các sự kiện di chuột với CSS thuần túy. Tôi chủ yếu sử dụng số :hover/:focus cho các loại vấn đề này, vì

1.) Chúng đáng tin cậy.

2.) Giá rẻ (theo kb).

Chỉ mất 2 quy tắc và không yêu cầu HTTP bên ngoài để bao gồm quy tắc cho menu đầy đủ chức năng, nhưng một số dòng JavaScript (hoặc, kinh dị, jQuery) để tạo cùng một thứ.

gì tôi đã nói trong các ý kiến, bạn nên hoặc có thể thực thi các thuộc tính tabindex để buộc một yếu tố để có thể đặt tiêu điểm, chẳng hạn như:

<div class="non-focusable-clickable-hover-element" tabindex="-1">I cannot be focussed<div> 

<div class="focusable-hover-element" tabindex="1">I can be focussed<div> 
Các vấn đề liên quan