0

我在使用 iPad 时遇到了我的应用程序问题。

对于我使用 jQuery 将事件绑定到表单元素的特定表单，我有一个“工具提示”，当您将鼠标悬停在表单字段上或将焦点放在它上面时，它会显示，这在桌面上运行良好。然而，在 iPad（和其他触控设备毫无疑问）上，第一次点击/点击/触摸到该字段被检测为mouseenter，所以这一切只是显示工具提示。

但是，我希望这允许在第一次触摸时将数据输入到字段中，而不是像刚才那样进行第二次。换句话说，我希望它在 iPad 上的行为与在桌面上的行为相同，即显示工具提示并允许数据输入。

我是否必须检测设备并将 a 欺骗mouseenter为 aclick或类似的东西？

// Attach focus and blur events to form elements
bindFocusAndBlurOnFormElements($('INPUT:text, INPUT:password, TEXTAREA, SELECT'), false);

function bindFocusAndBlurOnFormElements(elems) {
   elems.each(function(){
      if ($(this).next().hasClass('tool_tip')) {
         $(this).bind('mouseenter mouseleave focus blur', function(e){
            alert(e.type); 
            if (e.type=='mouseenter' || e.type=='focus') {
                // show the tool tip      
            } else {
               // hide the tool tip
            }
         });
       }    
   }
}
4

1 回答 1

1

在某处读过：

另一种方法可能是使用 CSS 媒体查询并仅将某些样式用于较小的屏幕/移动设备，这些设备最有可能具有触摸/点击功能。因此，如果您通过 CSS 有一些特定的样式，并且从 jQuery 中检查这些元素的移动设备样式属性，您可以挂钩到它们以编写您的移动特定代码。

更多信息：http ://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

另一个来源：

Modernizr是一种在任何站点上进行各种特征检测的出色、轻量级的方法。

它只是将类添加到每个功能的 html 元素。

然后，您可以在 CSS 和 JS 中轻松定位这些功能。例如：

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

和 Javascript（jQuery 示例）：

$('html.touch #popup').hide();

资料来源：

  1. 使用 Javascript 检测触摸屏设备
  2. javascript生成的HTML标签中的Javascript函数
于 2012-11-23T16:19:10.967 回答