JSFiddle - React, Tailwind, and code Playground

by podgorniy

HTML

<div id="contents">
		<p>
			Как насчет почитать <a href="http://wikipedia.org">Википедию</a>, или посетить <a href="http://w3.org"><i>W3.org</i></a> и узнать про современные стандарты?
		</p>
		<p>
			Как насчет посмотреть видео на <a href="http://youtube.com">YouTube</a>, или почитать <a href="http://habrahabr.ru"><i>Хабр</i></a> и узнать что-то новенькое?
		</p>
	</div>

JavaScript

function bind (obj, event_name, handler) {
	var handler_wrapper = function (event) {
		event = event || window.event;
		if (!event.target && event.srcElement) {
			event.target = event.srcElement;
		}
		return handler.call(obj, event);
	};

	if (obj.addEventListener) {
		obj.addEventListener(event_name, handler_wrapper, false);
	} else if (obj.attachEvent) {
		obj.attachEvent('on' + event_name, handler_wrapper);
	}
	return handler_wrapper;
}
//отмена действия
function isConfirmed() {
	//если нажата кнопка Cansel
	if(!confirm('Перейти по ссылке?')) {
		//кроссбраузерно отменить действие по умолчанию
		event.preventDefault() ? event.preventDefault() : event.returnValue = false;
	}
}
//переход по ссылке
function goToLink() {
	//получаем кликнутый элемент
	var target = event.target;
	//пока кликнутый элемент не контейнер ссылок
	while(target !== this) {
		//если нажатый элемент является ссылкой
		if(target.nodeName === 'A') {
			//отменить переход по ссылке и выйти из функции
			isConfirmed();
			return;
		}else{
			//иначе получить родителя кликнутого элемента
			target = target.parentNode;
		}
	}
}
//получаем контейнер ссылок
var container = document.querySelector('#contents');
//вешаем на него обработчик событий
bind(container, 'click', goToLink);