检测元素外部的点击（带框架）答案

【问题标题】：Detect click outside an element (with frames)检测元素外部的点击（带框架）
【发布时间】：2011-08-09 13:59:10
【问题描述】：

我有一个主页 (main.html)，它打开一个 iframe 页面 (iframe.html)。iframe 作为一种厚框窗口附加在 main.html 上。现在在这个 iframe.html 上，有一个div 元素“myDiv”，我需要检测此 myDiv 元素之外的点击..

脚本写在一个名为 iframe.html 的 JS 中

我已经尝试了一些事情（将事件绑定到文档并从 myDiv 中删除），但这不起作用..

$(document).click(function() {
  //your code here
});

$("#myDiv").unbind("click");

我不确定这个问题是否与 iframe 相关...

请帮助我。谢谢。

【问题讨论】：

我认为您可以将不同的函数绑定到 myDiv 返回 false，或者设置一个标志以忽略 document 绑定点击
非常感谢...不知道您为什么说忽略文档绑定单击...我的意思是“myDiv”是 iframe 中的一小部分...我想要 iframe 的其余部分（ ie 除了 myDiv) 来响应点击事件..

标签： javascript jquery dom iframe bind

【解决方案1】：

你尝试过这样的事情吗？它会侦听文档上的所有点击，但仅当事件的目标不是 myDiv 元素时才会触发您的代码。这样，您可以判断点击是否在 myDiv 元素之外......我使用了 jQuery：

// assign a document listener $(document).click(function(e){

if( $(e.target).attr('id') != "myDiv" )
{
  // execute your code here
  alert( e.target );        }
});

// assign an element listener
$('#myDiv').live('click',function(){alert("clicked on myDiv")});

如果用户直接单击 myDiv 元素，它还允许您将特定代码分配给要执行的 myDiv 元素...

【讨论】：

【解决方案2】：

我想你想隐藏myDiv，如果你在外面点击，试试这个。

$(document).click(function() {
  $("#myDiv").hide();
});

$("#myDiv").click(function(e){
  e.stopPropagation();
});

【讨论】：

【解决方案3】：

这是我所说的“标记和忽略”例程。我希望有一个jQuery-native方法来做到这一点，因为使用这样的标志是一个肮脏的黑客IMO

var myDiv = false;
$(document).click(function() {
  if (!myDiv) {
    // your code here
  }
  myDiv = false;
});

$("#myDiv").click(function(e){
  myDiv = true;
  return false; // don't know if returning false will stop propagation in jQuery
});

【讨论】：