如何在外面点击关闭jquery-ui对话框？

Question

我正在使用jquery-ui对话框（非模态对话框）。 如果用户在对话框外单击，我想关闭对话框。 出于这个原因，我使用了Jquery Outside Events插件 。 我也创造了一个小提琴：

http://jsbin.com/apezok/3/edit

在这个小提琴中，我创建了一个按钮，通过它我们可以打开一个对话框。 我也将clickoutside事件与对话框绑定在一起。 现在我的问题是当我点击按钮打开对话框时，单击外部事件执行并关闭对话框。如何在打开对话框时停止此事件执行？

Answer 1

单击按钮元素首先触发该元素的单击事件，然后单击事件将向上传播到DOM中的更高级别。 event.stopPropagation()可防止事件传播到更高级别：

$("#opendialog").click(function(event){
  event.stopPropagation();
  $(".dialog").dialog("open");
});

如果用户在对话框已打开时单击打开按钮该怎么办？ 这仍然算作在对话框外单击并关闭它吗？ 如果这是所需的行为，则以下工作：

$("#opendialog").click(function(event){
  if (!$(".dialog").dialog("isOpen")) {
    event.stopPropagation();
    $(".dialog").dialog("open");
  }
});