仅像鼠标一样点击，而不是点击

Question

我有一个用户界面，最适合用鼠标。但也很容易在触摸屏上使用它。 有一个很大的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();
});

保持其他一切。

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

我怎样才能确保它们不会同时发生？

Answer 1

如何使用onfocus而不是onclick？

1. 这是一种我更喜欢的纯css方法，css在所有设备上都更加兼容。
2. 您将使用通常存在的样式类。
3. 同类风格：我喜欢在可能的情况下使用相同的样式。
4. onFocus意味着在焦点（单击）上突出显示，如果您仍想将其用于桌面用户，则还具有悬停效果。 5.桌面用户必须继续留在onHover以保持亮点，而移动用户则专注于。）哪能带来更好的用户体验？

对我而言，代码较少，重量较轻，css具有现有的当前类，并且更兼容。

至少那是我的想法。 干杯：）

Answer 2

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

  

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

     

我怎样才能确保他们不会同时发生？

您可以查找移动设备并为其省略if(!!('ontouchstart' in window)){ //touch device events go here } else{ //mouse device events go here } 。

brew unlink readline 
brew link readline --force