Опытным путем: Это зависит от того, какой браузер вы используете; IE отменяет событие, все остальное (насколько я могу судить) продолжает его. Смотрите тестовые страницы и обсуждение ниже.
Теоретически: Голова Энди Е услужливо обнаружил , что DOM2 говорит, что событие должно продолжаться , потому что пузыри должны основываться на начальное состояние дерева. Таким образом, поведение большинства является правильным, IE здесь сам по себе. Квелль сюрприз.
Но: Имеет ли это отношение к тому, что вы видите, это действительно другой вопрос. Вы отслеживаете клики по родительскому элементу таблицы, и вы подозреваете, что очень редко, когда вы щелкаете по таблице, возникает условие гонки с завершением Ajax, которое заменяет таблицу, и щелчок теряется. Это условие гонки не может существовать в интерпретаторе Javascript, поскольку на данный момент Javascript в браузерах является однопоточным. (Рабочие потоки идут, хотя & ndash; уууууууу!) Но теоретически, щелчок может произойти и попасть в очередь в потоке пользовательского интерфейса, не являющегося Javascript, в браузере, тогда ajax может завершить и заменить элемент, а затем пользовательский интерфейс в очереди. событие обрабатывается и не происходит вообще, либо не всплывает, потому что у элемента больше нет родителя, поскольку он был удален. Может ли это произойти, зависит от реализации браузера lot . Если вы видите это в любых браузерах с открытым исходным кодом, вы можете посмотреть на их источник для постановки в очередь событий пользовательского интерфейса для обработки интерпретатором. Но это совсем другое дело, чем удаление элемента с кодом в обработчике событий, как показано ниже.
Эмпирические результаты для аспекта "пузырится-продолжить":
Протестировано Chrome 4 и Safari 4 (например, WebKit), Opera 10.51, Firefox 3.6, IE6, IE7 и IE8. IE был единственным, кто отменил событие, когда вы удалили элемент (и сделал это последовательно в разных версиях), ни одна из остальных не сделала. Кажется, не имеет значения, используете ли вы обработчики DOM0 или более современные.
UPDATE:
При тестировании IE9 и IE10 продолжают событие, поэтому несоответствие IE спецификациям останавливается на IE8.
Тестовая страница с использованием обработчиков DOM0:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
#log p {
margin: 0;
padding: 0;
}
</style>
<script type='text/javascript'>
window.onload = pageInit;
function pageInit() {
var parent, child;
parent = document.getElementById('parent');
parent.onclick = parentClickDOM0;
child = document.getElementById('child');
child.onclick = childClickDOM0;
}
function parentClickDOM0(event) {
var element;
event = event || window.event;
element = event.srcElement || event.target;
log("Parent click DOM0, target id = " + element.id);
}
function childClickDOM0(event) {
log("Child click DOM0, removing");
this.parentNode.removeChild(this);
}
function go() {
}
var write = log;
function log(msg) {
var log = document.getElementById('log');
var p = document.createElement('p');
p.innerHTML = msg;
log.appendChild(p);
}
</script>
</head>
<body><div>
<div id='parent'><div id='child'>click here</div></div>
<hr>
<div id='log'></div>
</div></body>
</html>
Тестовая страница с использованием обработчиков attachEvent / addEventListener (через прототип):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
#log p {
margin: 0;
padding: 0;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js'></script>
<script type='text/javascript'>
document.observe('dom:loaded', pageInit);
function pageInit() {
var parent, child;
parent = $('parent');
parent.observe('click', parentClick);
child = $('child');
child.observe('click', childClick);
}
function parentClick(event) {
log("Parent click, target id = " + event.findElement().id);
}
function childClick(event) {
log("Child click, removing");
this.remove();
}
function go() {
}
var write = log;
function log(msg) {
$('log').appendChild(new Element('p').update(msg));
}
</script>
</head>
<body><div>
<div id='parent'><div id='child'>click here</div></div>
<hr>
<div id='log'></div>
</div></body>
</html>