在触摸任何地方隐藏模态/工具提示/灯箱在移动野生动物园

Question

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

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

但是如何使用触摸手势专门存档而不是悬停？

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

Answer 1

这样做的一种方法是绑定身体“点击”事件，一旦点击它，隐藏“星”div并取消绑定身体“点击”事件，它是脏的，但它正在工作..

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