Empíricamente: Depende del navegador que está utilizando; IE cancela el evento, todo lo demás (por lo que yo sé) lo continúa. Vea las páginas de prueba y la discusión a continuación.
Teóricamente:Andy E's head amablemente found que DOM2 says the event should continue porque burbujeo debe basarse en la estado inicial del árbol. Entonces, el comportamiento de la mayoría es correcto, IE está solo aquí. Quelle sorpresa.
Pero: Si eso se relaciona con lo que está viendo, es otra pregunta. Está buscando clics en un elemento principal de la tabla, y lo que sospecha es que muy raramente, cuando hace clic en la tabla, hay una condición de carrera con una finalización Ajax que reemplaza la tabla y se pierde el clic. Esa condición de carrera no puede existir dentro del intérprete de Javascript porque, por ahora, Javascript en los navegadores es de un solo subproceso. (Los hilos del trabajador están llegando, aunque — ¡whoo hoo!) Pero en teoría, el clic podría suceder y ser puesto en cola por un hilo UI no Javascript en el navegador, entonces el ajax podría completar y reemplazar el elemento y luego la interfaz de usuario en cola el evento se procesa y no ocurre en absoluto o no se repite porque el elemento ya no tiene un elemento principal, que se eliminó. Si eso realmente puede suceder dependerá de un lote en la implementación del navegador. Si lo está viendo en cualquier navegador de código abierto, puede consultar su fuente para poner en cola eventos de IU para que el intérprete los procese. Pero esa es una cuestión diferente a la de eliminar el elemento con el código dentro del controlador de eventos como el siguiente.
resultados empíricos para el aspecto no-burbujeo-continuar:
Probado Chrome 4 y Safari 4 (por ejemplo, WebKit), Opera 10.51, Firefox 3.6, IE6, IE7, y IE8. IE fue el único que canceló el evento cuando eliminó el elemento (y lo hizo de manera consistente en todas las versiones), ninguno de los otros lo hizo. No parece importar si está usando manejadores DOM0 o más modernos.
ACTUALIZACIÓN: En las pruebas, IE9 y IE10 siguen el evento, por lo que el incumplimiento de las especificaciones IE se detiene en IE8.
página de prueba con los manipuladores 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>
página de prueba con attachEvent/addEventListener manipuladores (a través de Prototipo):
<!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>
Interesante pregunta. FWIW, debería ser fácil de probar: anide dos elementos, mire (por separado) los clics en ambos, en el controlador de clics en el niño, elimine al niño ('this.parentNode.removeChild (this)'), y vea si el evento burbujea hasta el padre. (Saliendo por la puerta o lo habría intentado yo mismo.) –
Decidí quedarme e intentarlo, vea abajo. –