Không hiển thị trạng thái di chuột trên các thiết bị cảm ứng

Điều này có khả thi không? Không thể chuyển đổi tất cả các kiểu di chuột của tôi thành mouseover người nghe có thể dừng thiết bị cảm ứng kích hoạt trạng thái di chuột của CSS không?Không hiển thị trạng thái di chuột trên các thiết bị cảm ứng

Tôi có một ứng dụng phải hoạt động trên cả cảm ứng và đầu vào con trỏ, ứng dụng hoạt động tốt nhưng một số kiểu được áp dụng khi di chuột chỉ không có ý nghĩa trên thiết bị cảm ứng vì chúng có xu hướng giữ trạng thái di chuột vô thời hạn sau khi người dùng đã nhấn một đối tượng.

Những điều cần đưa vào tài khoản:

rộng Device mang không tương quan với cảm ứng kích hoạt các thiết bị với tôi, các màn hình cảm ứng, chúng tôi đang sử dụng ở đây là màn hình kích cỡ màn hình.
Tôi không muốn buộc người dùng nhập bằng cách chạm vào thiết bị đa đầu vào.

Nguồn

2013-07-01 George Reith

tôi thấy câu hỏi của bạn khá interresting và đến accros [bài viết sau] (http: // www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/). Không phải vấn đề tương tự, nhưng giải pháp ở cuối bài viết có áp dụng cho trường hợp của bạn không? –

Có liên quan: http://stackoverflow.com/questions/8291517/ – xec

@Bartdude Cảm ơn, sự hiểu biết duy nhất của tôi với phát hiện đó là tôi tin rằng nó phát hiện xem thiết bị có khả năng chạm vào đầu vào không, cho dù đó là sử dụng đầu vào cảm ứng hay không. Đó là tốt hơn so với không có gì nhưng không tối ưu vì nó phá vỡ quy tắc thứ hai của tôi về buộc người dùng phải nhập thông qua chạm trên một thiết bị đa đầu vào. Nó cũng không hoạt động cho IE10 AFAIK (sử dụng một sự kiện độc quyền mà một khi tôi nghĩ rằng IE đã đúng, tốt ... đó và mô hình hộp) mặc dù bạn có thể cố gắng để phát hiện điều đó quá. –

Tôi đã giải quyết vấn đề này theo cách tiếp cận được chia sẻ trong liên kết trong các nhận xét ở trên. Nếu bạn không sử dụng, hãy cân nhắc sử dụng Modernizr trong trường hợp này. Muốn nghe một số cách tiếp cận khác cũng ...

Là người dùng, Blender đề cập, bạn có thể kiểm tra chống lại các sự kiện liên lạc như vậy:

html.touch { 
    /* Touch Device ~ No Hovers */ 
} 

html.no-touch { 
    /* Not a Touch is disabled */ 
} 
html.no-touch .element:hover { 
    opacity:.5; 
}

Nguồn

2013-07-01 15:00:23

Cảm ơn, đây là một điểm thú vị. Mặc dù tôi không chắc liệu Modernizr có phát hiện thành công các thiết bị có đầu vào cảm ứng thực hay các thiết bị có tiềm năng hay không. Mà mang lại một vấn đề khác là tôi buộc người dùng của một thiết bị đa đầu vào để sử dụng đầu vào cảm ứng thay vì một con trỏ (ít nhất là để làm cho kinh nghiệm của họ trực quan). –

Đào vào chức năng phát hiện cảm ứng Modernizr, nó sẽ kiểm tra theo cách sau: 'if (('ontouchstart' trong cửa sổ) || window.DocumentTouch && document instanceof DocumentTouch) {' –

Vì vậy, sự nghi ngờ của bạn là chính xác ở chỗ thử nghiệm chỉ cho biết trình duyệt có hỗ trợ các sự kiện chạm hay không, nhưng không nhất thiết nếu đó là thiết bị cảm ứng. Bây giờ bạn đã cho tôi đi ... Xin vui lòng cập nhật với cách tiếp cận cuối cùng của bạn. –

Giải pháp của tôi là thêm lớp css hover-tích cực vào việc Thẻ HTML, và sử dụng nó ở đầu tất cả các bộ chọn CSS với: hover và xóa lớp đó trong sự kiện chạm đầu tiên.

http://codepen.io/Bnaya/pen/EoJlb

JS:

(function() { 
    'use strict'; 

    if (!('addEventListener' in window)) { 
     return; 
    } 

    var htmlElement = document.querySelector('html'); 

    function touchStart() { 
     document.querySelector('html').classList.remove('hover-active'); 

     htmlElement.removeEventListener('touchstart', touchStart); 
    } 

    htmlElement.addEventListener('touchstart', touchStart); 
}());

HTML:

<html class="hover-active">

CSS:

.hover-active .mybutton:hover { 
    box-shadow: 1px 1px 1px #000; 
}

Nguồn

2014-08-25 12:29:31 Bnaya

Không hiển thị trạng thái di chuột trên các thiết bị cảm ứng

Trả lời

Các vấn đề liên quan