javascript - 在任何地方触摸隐藏移动浏览器上的模态/工具提示/灯箱

Question

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

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

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

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

Answer 1

一种方法是绑定(bind) body 的“点击”事件，一旦点击，隐藏“星形”div 并解除绑定(bind) body 的“点击”事件，它很脏，但它正在工作.. .

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