如何注册div click事件？
[英]how to register div click event?
问题描述
I am trying to register the clickevent for my div. 
我正在尝试为我的div注册clickevent。 If I place the iframe inside the div it wont work. 如果我将iframe放在div中，它就不会工作。 If it is outside it will work. 如果它在外面它会工作。 How can I get it working when the iframe is inside the div? 当iframe在div中时，我怎样才能使它工作？
html: HTML：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
#mydiv
{
height: 300px;
width: 300px;
border: 1px solid;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script>
$(function () {
var clicks = 0;
$('#mydiv').bind('click', function (e) {
clicks++;
$("#numberclicks").html(clicks);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="numberclicks"></span>
<div id="mydiv">
<iframe id="myframe" src="http://www.jquery.com" width="300" height="300" />
</div>
</div>
</form>
</body>
</html>
4 个解决方案
解决方案1
2 2011-11-28 23:18:36
iframe正在吞下div的click事件，因为它是一个跨站点脚本的东西，你可以做的是使用z-index将if放在iframe的顶部并从上层div收集点击。
解决方案2
0 2011-11-28 23:19:24
That is because the actual click events come to the content of iframe , which is a whole different document. 这是因为实际点击事件来自iframe的内容， iframe是一个完全不同的文档。 In order to handle those, you have to attach to that document's click event. 为了处理这些，您必须附加到该文档的click事件。
解决方案3
0 已采纳 2011-11-28 23:27:57
The iframe is a totally differente DOM document, that is why, when you click on the DIV, the browser is actually rendering the clicks on the iframe content, you can put an empty div over the iframe to mimic that, that would be something like this: iframe是一个完全不同的DOM文档，这就是为什么当你点击DIV时，浏览器实际上是在iframe内容上呈现点击，你可以在iframe上放一个空div来模仿那个，这就像是这个：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
#mydiv
{
height: 300px;
width: 300px;
border: 1px solid;
}
#clickerDiv
{
height: 300px;
position: absolute;
width: 300px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(function () {
var clicks = 0;
$('#mydiv').bind('click', function (e) {
clicks++;
$("#numberclicks").html(clicks);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="numberclicks">0</span>
<div id="mydiv">
<div id="clickerDiv"></div>
<iframe id="myframe" src="http://www.jquery.com" width="300" height="300" />
</div>
</div>
</form>
</body>
</html>
You can link the click event to the phantom div, or even to the main div container! 您可以将click事件链接到幻像div，甚至链接到主div容器！
解决方案4
0 2011-11-28 23:32:48
All answers are mostly correct -- the IFRAME creates a new window object. 所有答案大多都是正确的--IFRAME创建一个新的窗口对象。 You are wiring into the "#mydiv" elements in the parent window, not your IFRAME's window. 您将连接到父窗口中的“#mydiv”元素，而不是IFRAME的窗口。 When a click event occurs in a DIV, it will "bubble" up through the DOM tree. 当在DIV中发生单击事件时，它将通过DOM树“冒泡”。 Provided that the event is not "stopped" from bubbling, you could catch and handle the event in any of the DIV's parent elements. 如果事件没有“停止”冒泡，您可以捕获并处理任何DIV的父元素中的事件。 However, because it is in an IFRAME, it will stop bubbling at the document level and will not continue to bubble in the parent frame. 但是，因为它位于IFRAME中，所以它将停止在文档级别冒泡，并且不会继续在父框架中冒泡。
Now, if the IFRAME were on the same domain as your parent frame, you could access the elements of that document and wire-up your event handler to those elements. 现在，如果IFRAME与父框架位于同一个域中，则可以访问该文档的元素，并将事件处理程序连接到这些元素。 However, you appear to be working across domains which violates the "Same Origin Policy": http://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy_for_DOM_access 但是，您似乎正在跨越违反“同源政策”的域工作： http ： //code.google.com/p/browsersec/wiki/Part2#Same-origin_policy_for_DOM_access
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.