как зарегистрировать событие div div? - PullRequest
0 голосов
/ 29 ноября 2011

Я пытаюсь зарегистрировать кликвент для моего div.Если я помещу 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>

Ответы [ 4 ]

2 голосов
/ 29 ноября 2011

iframe проглатывает события click для div как его междисциплинарный сценарий, что вы можете сделать, это поместить div поверх iframe с помощью z-index и собирать клики из верхнего div.

0 голосов
/ 29 ноября 2011

Все ответы в основном правильные - IFRAME создает новый объект окна. Вы подключаетесь к элементам "#mydiv" в родительском окне, а не в окне IFRAME. Когда в DIV происходит событие щелчка, оно «всплывает» через дерево DOM. При условии, что событие не «остановлено» от пузырьков, вы можете перехватить и обработать событие в любом из родительских элементов DIV. Однако, поскольку он находится в IFRAME, он перестанет пузыриться на уровне документа и не будет пузыриться в родительском фрейме.

Теперь, если IFRAME находится в том же домене, что и ваш родительский фрейм, вы можете получить доступ к элементам этого документа и подключить обработчик событий к этим элементам. Тем не менее, вы, похоже, работаете в разных доменах, что нарушает «Политику одного источника»: http://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy_for_DOM_access

0 голосов
/ 29 ноября 2011

iframe - это совершенно другой документ DOM, поэтому, когда вы нажимаете на DIV, браузер фактически отображает щелчки на содержимом iframe, вы можете поместить пустой элемент div над iframe, чтобы имитировать это, что быть примерно таким:

<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!

0 голосов
/ 29 ноября 2011

Это связано с тем, что фактические события щелчка приходят к содержимому iframe, который представляет собой совершенно другой документ.Чтобы справиться с этим, вы должны прикрепить к событию click этого документа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...