在任何地方触摸时在移动 safari 上隐藏模式/工具提示/灯箱

Question

我正在专门为触摸设备构建一个页面。 页面本身有菜单项，当您触摸菜单时，会显示一个 DIV。 但是，我喜欢在用户点击 DIV 之外的任何区域时隐藏 DIV。

我知道在桌面上，你可以在菜单上设置悬停效果，并显示一个 DIV，这模仿了我在移动设备上想要的效果，你触摸任何地方，菜单就会隐藏。

但是我怎样才能专门使用触摸手势而不是悬停来存档呢？

到目前为止，这里有一个示例代码： http://jsfiddle.net/calebo/E5vvm/

Answer 1

一种方法是绑定body“click”事件，一旦点击，隐藏“star” div并取消绑定body“click”事件，它很脏，但它正在工作.. .

$(document).ready(function() {
  $('.widget-stars').bind('click', function() {
    event.preventDefault();
    $('#star').fadeIn(function() {
      $( "#star" ).parents( "body" ).bind( "click", function() {
        $( "#star" ).fadeOut();
        $( this ).unbind( "click" );
      });
    });
  });
});