Относитесь только к мыши, как мышь, а не к клику

Question

У меня есть пользовательский интерфейс, который лучше всего использовать с мышью. Но его легко можно использовать и на сенсорном экране. Существует большой table со многими строками и столбцами.

Вы наведите курсор, и 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

Как насчет использования onclick, вы используете onfocus?

1. Этот чистый метод css, который я предпочитаю, и css имеет тенденцию быть более совместимым на всех устройствах.
2. Вы бы использовали класс стиля, который обычно существует.
3. Та же конструкция: Мне нравится иметь такой же стиль, когда это возможно.
4. onFocus предназначен для подсветки onFocus (щелкните), а также имеет эффекты зависания, если вы хотите использовать его для пользователей настольных компьютеров. Пользователи 5.Desktop должны оставаться в курсе onHover, чтобы сохранить выделение, в то время как пользователи мобильных телефонов сосредоточены на них.) Что делает лучший UX?

Для меня это меньше кода, легкий вес, css с существующими классами тока и более совместимыми.

По крайней мере, это мои мысли. Cheers :)

Answer 2

Это 2 совершенно разных ответа, поэтому я добавил второй метод.

, но что будет, на мобильном устройстве Я вызову ОБОЛОЧКА И нажмите одним касанием. Поэтому он выделит, а затем сразу подтвердите.

Как я могу убедиться, что они не будут происходить одновременно?

Вы можете найти мобильные устройства и опустить .hover для них.

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