随时随地触摸隐藏移动浏览器上的模式/工具提示/灯箱

Question

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

我知道在桌面上，您可以在菜单上具有悬停效果，并显示DIV，这类似于我希望在您触摸任何地方的移动设备上产生的效果，菜单会隐藏。

但是我该如何使用触摸手势而不是将鼠标悬停来专门存档呢？

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

Answer 1

一种方法是绑定主体“ click”事件，并在单击它时立即隐藏“ star” div并取消绑定主体“ 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" );
      });
    });
  });
});