检测客户端设备是否支持:hover和:focus状态 [英] Detect if a client device supports :hover and :focus states
问题描述
听起来像一个简单的问题，但是解决起来却非常困难.对于某些网站，我只有在用户悬停/关注链接时才会显示这些内容.但是，链接本身具有目标.
Sounds like a simple problem, but turns out to be quite challenging to solve. For some website I have contents that are only to be shown if a user hovers/focuses a link. The link however has a target itself.
如果触摸屏用户单击了这些链接之一，浏览器将立即转到href位置.这意味着悬停内容将永远不可见！
If one of those links is clicked by a touch screen user the browser instantly goes to the href location. This means the hover contents are never visible!
这就是为什么没有鼠标(或像魔术遥控器一样悬停其他设备)的用户应该看到替代内容的原因.但是我怎么能检测到呢?
This is why users which do not have a mouse (or another device to hover like a magic remote control) should see alternative content. But how can I detect this?
$(document).on('click','#my-menu-inner > ul > li > a',function(e) {
if(clientHasInputDeviceSupportingHover()) {
return true;
} else {
e.preventDefault();
$('#for-no-hover-visitors').html('');
$(this).clone().appendTo('#for-no-hover-visitors');
$(this).next().clone().appendTo('#for-no-hover-visitors');
}
});
function clientHasInputDeviceSupportingHover() {
// HOW CAN I DETECT THIS???
if($('#checkhover:checked').length > 0) {
return true;
}
return false;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
#my-menu-inner > ul {
margin:10px;
width:100%;
background-color:yellow;
list-style-type:none;
position:relative;
}
#my-menu-inner > ul > li {
float:left;
margin:20px;
}
#my-menu-inner > ul > li > a {
padding:20px;
border:1px solid black;
display:block;
}
#my-menu-inner > ul > li > div.sub {
position:absolute;
top:calc(100% - 20px);
background-color:red;
padding:40px;
display:none;
left:0;
width:100vw;
}
#my-menu-inner > ul > li a:hover + div.sub, #my-menu-inner > ul > li a:focus + div.sub,
#my-menu-inner > ul > li > div.sub:hover, #my-menu-inner > ul > li > div.sub:focus {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Simulate for Client supporting hover: <input type="checkbox" id="checkhover" />
<div id="my-menu">
<div id="my-menu-inner">
<ul class="clearfix">
<li>
<a href="http://www.example.com/foo/">foo</a>
<div class="sub">
<ul>
<li><a href="http://www.example.com/mobile/">mobile</a></li>
<li><a href="http://www.example.com/users/">users</a></li>
</ul>
</div>
</li>
<li>
<a href="http://www.example.com/bar/">bar</a>
<div class="sub">
<ul>
<li><a href="http://www.example.com/never/">never</a></li>
<li><a href="http://www.example.com/see-me/">see me</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="for-no-hover-visitors"></div>
问题是clientHasInputDeviceSupportingHover(). 最可靠的发现方法是什么?
到目前为止我们所知道的
What we know so far
可以检测触摸设备: 什么是最好的方法使用JavaScript检测触摸屏"设备?
It is possible to detect a touch device: What's the best way to detect a 'touch screen' device using JavaScript?
鼠标检测至少可能在"onclick"下起作用: 如何检测设备是否具有鼠标支持?
Mouse detection at least might work"onclick": How to detect if a device has mouse support?
通常，有很多不同的可能的输入设备: https://en.wikipedia.org/wiki/Input_device#Pointing_device
In general there are a lot of different possible input devices: https://en.wikipedia.org/wiki/Input_device#Pointing_device
非常欢迎使用通用/更可靠的解决方案.
A generic / more reliable solution would be very welcome.
推荐答案
W3C似乎已经意识到了这个问题，并引入了悬停功能:
The W3C seems to have recognized this problem and has introduced the hover feature:
悬停媒体功能用于查询用户
hover在页面上具有主指针设备的元素上.如果一个 设备具有多个定点设备，则悬停媒体功能必须 反映主要"指示设备的特性，例如 由用户代理确定. (查询任何功能 可用的指点设备，请参阅任意悬停媒体功能.)
The hover media feature is used to query the user’s ability to
hoverover elements on the page with the primary pointing device. If a device has multiple pointing devices, the hover media feature must reflect the characteristics of the "primary" pointing device, as determined by the user agent. (To query the capabilities of any available pointing devices, see the any-hover media feature.)
甚至还有一个媒体查询来检查是否有悬停的可能性:
There is even a media query to check if there is any possibility to hover:
any-pointer和any-hover媒体功能与 指针和悬停媒体功能，但它们对应于 用户可以使用的所有定点设备的功能.在里面 如果是任何指针，则可以匹配多个值，如果 不同的指示设备具有不同的特征.
The
any-pointerandany-hovermedia features are identical to the pointer and hover media features, but they correspond to the union of capabilities of all the pointing devices available to the user. In the case of any-pointer, more than one of the values can match, if different pointing devices have different characteristics.
代码示例:
/* Primary input mechanism system can
hover over elements with ease */
@media (hover: hover) { ... }
/* Primary input mechanism cannot hover
at all or cannot conveniently hover
(e.g., many mobile devices emulate hovering
when the user performs an inconvenient long tap),
or there is no primary pointing input mechanism */
@media (hover: none) { ... }
/* One or more available input mechanism(s)
can hover over elements with ease */
@media (any-hover: hover) { ... }
/* One or more available input mechanism(s) cannot
hover (or there are no pointing input mechanisms) */
@media (any-hover: none) { ... }
此功能仍然存在风险，但是我真的希望它已经得到广泛支持，将尽快得到完全支持: https://caniuse.com/#feat=css-media-interaction
This feature is still at risk, but I really hope it will be fully supported soon as it is already widely supported: https://caniuse.com/#feat=css-media-interaction
进一步阅读: https://css-tricks.com/touch -devices-not-judged-size/
对于Chrome，请在此处测试您的设备: https://googlechrome.github.io /samples/media-hover-pointer/
For Chrome test your device here: https://googlechrome.github.io/samples/media-hover-pointer/
使用JavaScript测试: https://jsfiddle.net/Blackbam/zkd2cs0t/16/
Test with JavaScript: https://jsfiddle.net/Blackbam/zkd2cs0t/16/
目前最好的解决方案是将这些媒体查询与回退解决方案结合使用，该解决方案通过document.createEvent("TouchEvent");进行触摸检测，并通过mousemove.hasMouse进行鼠标检测.
The best solution for now is most probably to use those media queries with a fallback solution using touch detection via document.createEvent("TouchEvent"); and mouse detection via mousemove.hasMouse.
这篇关于检测客户端设备是否支持:hover和:focus状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
