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的点击事件，因为它是一个跨站点脚本的东西，你可以做的是使用z-index在iframe顶部放置一个div并从上面的div中收集点击。

Answer 2

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

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创建一个新的窗口对象。你正在接入＆＃34; #mydiv＆＃34;父窗口中的元素，而不是您的IFRAME窗口。当在DIV中发生点击事件时，它将＆＃34;冒泡＆＃34;通过DOM树。但事件未被停止＆＃34;从冒泡中，你可以在任何DIV的父元素中捕获和处理事件。但是，因为它在IFRAME中，它将停止在文档级别冒泡，并且不会继续在父框架中冒泡。

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

如何注册div click事件？

4 个答案: