Как использовать javascript onclick для тега DIV, чтобы переключать видимость раздела, содержащего интерактивные ссылки?

Question

Привет, у меня есть раздел DIV, в котором изначально виден только заголовок. Чего я хотел бы добиться, так это то, что когда посетитель щелкает в любом месте области toggle_section, toggle_stuff div переключается между видимым и скрытым.

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php">Some link</a>
    </div>
</div>

Однако, как это настроено прямо сейчас, если у меня есть какая-либо ссылка <a> в пределах toggle_section, щелчок по этой ссылке также вызовет событие onclick.

Тогда мой вопрос: как лучше всего настроить этот тип поведения?

Answer 1

Самое простое решение - добавить дополнительный обработчик onclick к ссылке в вашем DIV, который останавливает распространение события:

<div id="toggle_section" 
     onclick="javascript: new Effect.toggle('toggle_stuff', 'slide');">
    <div id="toggle_title">Some title</div>
    <div id="toggle_stuff">
        some content stuff
        <a href="/foo.php"
            onclick="Event.stop(event);"
        >Some link</a>
    </div>
</div>

В приведенном выше примере используется функция прототипа Event.stop() для упрощения кросс-браузерной остановки распространения событий.

Когда вы используете встроенный обработчик onclick(), большинство (если не все) браузер сначала пересекает событие в фазе пузырьков (что вам и нужно).

Хорошее руководство для понимания фактических причин такого поведения и различий между захватом событий и всплывающими событиями можно найти в отличном режиме Quirksmode. 1020 *

Answer 2

в сценарии:

function overlayvis(blck) {
  el = document.getElementById(blck.id);
  el.style.visibility = (el.style.visibility == 'visible') ? 'hidden' : 'visible';
}

ссылка активатора, за которой следует контент (без причины, которой больше не может быть на странице):

<div onclick='overlayvis(showhideme)">show/hide stuff</div>
<div id="showhideme">
  ... content to hide / unhide ...
</div>

Я получил это от Модальное окно javascript css overlay - пришлось искать источник и было приятно узнать, что это был этот сайт. :)

Answer 3

После того, как я опубликовал свой первый вопрос, я не мог дождаться, чтобы попытаться еще раз подумать об этом, и мне кажется, что я нашел довольно простой способ добиться этого.

Я переместил onlick Effect.toggle в отдельную функцию, такую ​​как:

function someClick(event) {
    if (event.target.nodeName == 'A') {
        return;
    } else {
        new Effect.toggle('toggle_stuff', 'slide');
    }
}

Полагаю, это будет работать только для тегов A, а не для всего, что можно нажимать.

Answer 4

Добавьте обработчик onclick, чтобы остановить распространение события.

С использованием JQuery: OnClick = "event.stopPropagation ()"

С использованием прототипа: OnClick = "Event.stop (событие)"

Answer 5

Я действительно не знаю, сработает ли это, но попробуйте дать элементу ссылки большее значение z-index, чем у элемента toggle_section.

что-то вроде:

#toggle_section a { z-index: 10; }