Сделайте так, чтобы при клике на ссылки внутри <DIV id="content"> пользователю выводился вопрос о том, действительно ли он хочет покинуть страницу и если он не хочет, то прерывать переход по ссылке.
Как это должно работать:
Детали:
- Содержимое блока
DIVможет быть загружено динамически и присвоено при помощиinnerHTML. Так что обработчики на ссылки ставить нельзя. Используйте делегирование. - Содержимое может содержать вложенные теги, в том числе внутри ссылок, например,
<a href=".."><i>...</i></a>.
Исходный документ: tutorial/browser/events/links-src.html
Это - классическая задача на тему делегирования.
В реальной жизни, мы можем перехватить событие и создать AJAX-запрос к серверу, который сохранит информацию о том, по какой ссылке ушел посетитель.
Мы перехватываем событие на contents и поднимаемся до parentNode пока не получим A или не упремся в контейнер.
document.getElementById('contents').onclick = function(evt) {
var evt = evt || event;
var target = evt.target || evt.srcElement;
function handleLink(href) {
var isLeaving = confirm('Уйти на '+href+'?');
if (!isLeaving) return false;
}
while(target != this) {
if (target.nodeName == 'A') {
*!*
return handleLink(target.getAttribute('href')); // (*)
*/!*
}
target = target.parentNode;
}
}
В строке (*) используется атрибут, а не свойство href, т.к. свойство обязано содержать полный валидный адрес, а атрибут — в точности что указано в HTML.
Полное решение: tutorial/browser/events/links.html.