仅将点击视为鼠标悬停，而不是单击答案

【问题标题】：Treat tap like mouse over only, not like click仅将点击视为鼠标悬停，而不是单击
【发布时间】：2016-12-16 01:20:26
【问题描述】：

我有一个用户界面，最好使用鼠标。但也很容易在触摸屏上使用它。有一个很大的table，有很多行和列。

您悬停，您所在的 TD 会突出显示。这使您可以查看是否获得了正确的 TD。您单击突出显示的 TD，现在会执行确认操作。

这是我对移动设备的设想：

您点击，您所在的 TD 就会突出显示。这使您可以查看是否获得了正确的 TD。您再次点击突出显示的 TD，现在会发生确认操作。

所以这是我以前的：

$(document).on('mousover','td.cell',function(){
    cell.highlight();
});
$(document).on('click','td.cell',function(){
    cell.confirm();
});
$(document).on('mouseleave','td.cell',function(){
    cell.clearHighlight();
});

我认为很容易解决的问题

$(document).on('click','td.cell',function(){
    if(cell.isHighlighted)
        cell.confirm();
    else
        cell.highlight();
});

保持其他一切不变。

但是会发生什么，在移动设备上，我将同时触发鼠标悬停和单击。因此它会突出显示，然后立即确认。

如何确保它们不会同时发生？

【问题讨论】：

标签： jquery user-interface hover click touch

【解决方案1】：

用 onfocus 代替 onclick 怎么样？

这是一种我更喜欢的纯 css 方法，而且 css 往往在所有设备上都更加兼容。
您将使用通常存在的样式类。
相同的类样式：我喜欢尽可能使用相同的样式。
onFocus 旨在突出显示 onFocus（单击），如果您仍想为桌面用户使用它，它还具有悬停效果。 5.桌面用户必须将鼠标悬停在 onHover 上以保持突出显示，而移动用户则保持专注。）这有助于更好的用户体验？

对我来说，它的代码更少，重量更轻，css 与现有的当前类兼容，并且更兼容。

至少这是我的想法。干杯:)

【讨论】：

我喜欢这个主意，但如果我使用.on('click' 或.on('focus click' 并没有真正的区别。在移动设备上，只需轻轻一按，我仍然会同时触发鼠标悬停和单击（或焦点单击）。如果我误解了，请告诉我
我想这将是一个很好的解决方案 - 不幸的是我的实现有点复杂。我在现有的电子商务系统中工作，所以我在他们的样式表和表格等中进行调整。此外，我一次突出显示的不仅仅是一个单元格，涉及复杂的规则。所以我认为我不得不使用 Javascript。无论如何都很好的答案！ :-)
@olli 如果我可能会问，从悬停状态作为二次点击的方法是什么？如何和什么被称为？干杯！
它本质上是一个烛台。点击会弹出一个对话框，总结你的预订，提供一些额外的选择，然后你可以说“确认约会”

【解决方案2】：

这是两个完全不同的答案，所以我添加了第二种方法。

但是会发生什么，在移动设备上我会同时触发鼠标悬停和单击一下。因此它将突出显示，然后立即确认。

我如何确保它们不会同时发生？

您可以查找移动设备并省略.hover。

if(!!('ontouchstart' in window)){
//touch device events go here
}
else{
//mouse device events go here
}

【讨论】：