如何注册div click事件？

Question

我正在尝试为我的div注册clickevent。 如果我将iframe放在div中，它就不会工作。 如果它在外面它会工作。 当iframe在div中时，我怎样才能使它工作？

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>

Answer 1

iframe正在吞下div的click事件，因为它是一个跨站点脚本的东西，你可以做的是使用z-index将if放在iframe的顶部并从上层div收集点击。

Answer 2

这是因为实际点击事件来自iframe的内容， iframe是一个完全不同的文档。 为了处理这些，您必须附加到该文档的click事件。

Answer 3

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>

您可以将click事件链接到幻像div，甚至链接到主div容器！

Answer 4

所有答案大多都是正确的--IFRAME创建一个新的窗口对象。 您将连接到父窗口中的“#mydiv”元素，而不是IFRAME的窗口。 当在DIV中发生单击事件时，它将通过DOM树“冒泡”。 如果事件没有“停止”冒泡，您可以捕获并处理任何DIV的父元素中的事件。 但是，因为它位于IFRAME中，所以它将停止在文档级别冒泡，并且不会继续在父框架中冒泡。

现在，如果IFRAME与父框架位于同一个域中，则可以访问该文档的元素，并将事件处理程序连接到这些元素。 但是，您似乎正在跨越违反“同源政策”的域工作： http ： //code.google.com/p/browsersec/wiki/Part2#Same-origin_policy_for_DOM_access

如何注册div click事件？

问题描述

4 个解决方案

解决方案1
2 2011-11-28 23:18:36

解决方案2
0 2011-11-28 23:19:24

解决方案3
0 已采纳 2011-11-28 23:27:57

解决方案4
0 2011-11-28 23:32:48

如何注册div click事件？

问题描述

4 个解决方案

解决方案1 2 2011-11-28 23:18:36

解决方案2 0 2011-11-28 23:19:24

解决方案3 0 已采纳 2011-11-28 23:27:57

解决方案4 0 2011-11-28 23:32:48

解决方案1
2 2011-11-28 23:18:36

解决方案2
0 2011-11-28 23:19:24

解决方案3
0 已采纳 2011-11-28 23:27:57

解决方案4
0 2011-11-28 23:32:48