Javascript: Div onclick не работает для некоторого содержимого Div

Question

Я хотел бы развернуть / свернуть div, когда на него нажимают. Он уже работает с onmouseover / onmouseout, но я бы предпочел onclick.

Теперь, похоже, проблема в содержимом div:

Это работает:

<div onclick="alert('works')" style="position:fixed; height:100px; width:100px; background:#FF0000;">
</div>

Это не работает:

<div onclick="alert('works')">
    <div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
        <script>
            document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
        </script>
    </div>
</div>

Но это (onmouseover вместо onclick) снова работает:

<div onmouseover="alert('works')">
    <div style="position:absolute; top:0px; bottom:-18px; left:0px; right:-18px; overflow: hidden; z-index:300;">
        <script>
            document.write('<IFRAME id="test_frame" SRC="iframesrc.html" frameborder="0" WIDTH="100%" HEIGHT="100%"></IFRAME>');
        </script>
    </div>
</div>

Полагаю, это должно быть какая-то проблема со слоями, но я попытался поместить "onclick" в каждый из различных слоев div / iframe, и я не смог заставить его работать Я новичок, и было бы здорово узнать, что не так! Спасибо!

Answer 1

Я бы порекомендовал использовать для этого JQuery.

Вы можете делать то, что хотите, с 1 строкой кода.

напишите test.js вот так:

  $(document).ready(function() {

   // hides the div as soon as the DOM is ready

    $('#yourDiv').hide();

   // shows the div on clicking the noted link  

    $('#yourDiv-show').click(function() {

      $('#yourDiv').show('slow');

      return false;

    });

   // hides the div on clicking the noted link  

    $('#youDiv-hide').click(function() {

      $('#yourDiv').hide('fast');

      return false;

    });
   // toggles the div on clicking the noted link  

    $('#youDiv-toggle').click(function() {

      $('#yourDiv').toggle(400);

      return false;

    });

  });

Затем импортируйте этот javascript в ваш HTML, JSP и т. Д. *

Answer 2

Если вы установите первый div с рамкой 10px и нажмете на эту рамку, он будет работать.Когда вы запускаете новый div, первый div это просто контейнер, любые вызовы javascript не будут запускаться.

как border: 50px solid; вы поймете, что я имею в виду.

Onmouseover работает, потому что вына самом деле пройти через невидимую черту div.

Answer 3

События JavaScript должны «пузыриться» по наследству DOM-узлов от того, который вы щелкаете, вплоть до узла body, выполняя любые соответствующие обработчики, зарегистрированные для этих узлов на этом пути, за исключением определенного обработчика событий.останавливает распространение этого события.

I подозреваю iframe - ваша проблема, так как это отдельный HTML-документ с отдельной цепочкой событий, и события не всплывают изэто, но я не знаю наверняка.

Я бы попробовал приведенное выше предложение jQuery, но я думаю, что эта конкретная ситуация не позволит даже jQuery работать.