仅当分配事件侦听器时，CSS悬停在ios上才有效 [英] CSS hover on ios works only if an event listener is assigned

问题描述

我正面临一个奇怪的问题。
我用js创建了一个选择下拉表单元素的css下拉菜单。它似乎在大多数的浏览器，但ios设备工作正常。当我悬停下拉div时; css悬停事件不会在ios设备中触发，但如果我将侦听器中没有动作的下拉元素添加到事件侦听器，则悬停事件开始工作。

这是我的代码来编辑： http：// codepen.io/kuldeepdaftary/pen/jKeDi

测试： http://codepen.io/kuldeepdaftary/full/jKeDi

尝试评论JS中的代码片段：

  $（'。dropdown'）。click（function（）{}）; 
  

一旦您评论上述部分！ Css hover在iphone / ipad中将不再工作，但只要您取消注释，它就会正常工作。

由于clickevent listner函数是空白的！我不明白这是什么解决问题？

解决方案

ios设备上没有悬停事件。首先分离显示和隐藏下拉菜单到自己功能的逻辑。然后，您应该根据您在浏览器中可用的功能来解决此问题。

  if（document.documentElement中的'ontouchstart'） {
 $（。dropdown）。click（hoverFunction）; 
} else {
 $（。dropdown）。hover（hoverFunction）; 
} 
  

值得注意的是，您可以使用仅使用CSS的CSS来实现下拉功能如果您有这方面的解决方案：
下拉菜单基于触摸的设备

I'm facing a weird problem. I have created a css dropdown menu out of select dropdown form element using js. And it seems to work fine in most of the browsers but ios devices. When I hover the dropdown div; css hover event is not triggered in ios devices but if I add an eventlistener to dropdown element with no actions in the listener the hover event starts working.

Here's my code to edit : http://codepen.io/kuldeepdaftary/pen/jKeDi

to test : http://codepen.io/kuldeepdaftary/full/jKeDi

Try commenting following snippet in JS:

  $('.dropdown').click(function(){}); 

once you comment the above part ! Css hover will not work anymore in iphone/ipads but as soon as you uncomment it, it will work normally.

Since the clickevent listner function is blank ! I dont understand what is it that solving the problem?

解决方案

There is no hover event on ios devices. First of all isolate the logic for showing and hiding the dropdown into its own function. Then you should approach this based on the features available to you in the browser.

if ('ontouchstart' in document.documentElement) {
  $(".dropdown").click(hoverFunction);
} else {
  $(".dropdown").hover(hoverFunction);
}

It might be worth noting that you can achieve dropdown functionality using only CSS in which case there is a solution here for you: Drop-down menu on touch based devices

这篇关于仅当分配事件侦听器时，CSS悬停在ios上才有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！