Question

我创建了一个自定义导航栏，该导航栏运行良好。我的问题在于根据实际设备使用哪些功能。对于触摸屏设备，我想使用单击功能，对于键盘设备，我想使用鼠标悬停。我的导航栏有两个用于悬停和单击事件的脚本。

点击

<script>
$( '.tc-navigation > li' ).click(function() {
$(this).children('ul').toggleClass('toto');
$(this).siblings().children('ul').removeClass('toto');   
return false;
});

$(document).click(function() {
$('.tc-navigation > li > ul').removeClass('toto');
});
</script>

悬停

<script>
$( '.tc-navigation > li' ).hover(function() {
$(this).children('ul').toggleClass('toto');   
});
</script>

任何人都可以帮助我确定所用设备的类型以及如何实施已经编写好的脚本吗？

Answer 1

首先，您需要一种方法来检测设备是否可移动：

function isMobile() {
  return /Mobile/.test(navigator.userAgent); // do some research if "Mobile" always occurs in userAgent string if you want to be sure
}

基于此，您可以选择事件：

var event = isMobile() ? "click" : "mouseover";

使用event变量来附加适当的侦听器。在香草JS中，您将执行以下操作：
```
element.addEventListener(event, doStuff);
```

我不使用jQuery，所以我会留给您找出答案，但是我认为您在这里寻找的是.on()方法-read here

基于触摸屏和键盘检测，实现不同功能

1 个答案: