隨時隨地觸摸隱藏移動瀏覽器上的模式/工具提示/燈箱

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" );
      });
    });
  });
});