ios 上的 CSS 悬停仅在分配了事件侦听器时才有效 [英] 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/jKeDip>

尝试在 JS 中注释以下代码段:

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

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

因为 clickevent 监听函数是空白的！我不明白解决问题的方法是什么?

解决方案

ios设备上没有悬停事件.首先，将显示和隐藏下拉菜单的逻辑隔离到它自己的函数中.然后，您应该根据浏览器中可用的功能来处理此问题.

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

值得注意的是，您可以仅使用 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

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