触摸元素外部时隐藏元素而不触发新操作

Question

嗨，当图像悬停时，我会看到一个弹出窗口。在桌面上，当鼠标悬停在图像上时，它可以正常工作。

然而，在移动设备上，我想让popover一键打开，然后在屏幕上弹出窗口外的任何地方点击时关闭。

然而，棘手的部分是，由于图像被放置在靠近的网格上，单击弹出窗口外部可能会触发另一个弹出框以打开另一个图像。理想情况下，我想关闭弹出窗口，而不会触发另一个打开另一个弹出窗口的事件。要触发另一个弹出窗口，用户必须再次单击。

小提琴：http://jsfiddle.net/allenchuang/hwu81fpq/

小提琴结果：http://jsfiddle.net/allenchuang/hwu81fpq/embedded/result/

这是我到目前为止使用jQuery实现的目标..

$(document).on('touchstart', function (e) {
  var container = $(".pop-over");
  while(container.parent().is(":hover")) {
      // if the target click isn't the container nor a descendant of the container
      if (!container.is(e.target) && container.has(e.target).length === 0) 
      {
          e.preventDefault();
          container.hide();                  
      }
  }
});   

CURRENT BEHAVIOR：点击img1 - ＆gt;打开popover1 - ＆gt;点击img2（或身体中的任何其他元素） - ＆gt;关闭popover1但打开popover2。

IDEAL BEHAVIOR：点击img1 - ＆gt;打开popover1 - ＆gt;点击img2（或身体中的任何其他元素） - ＆gt;关闭popover1（触发popover2，你需要再次点击image2）