Agrego addEventListener con un bucle a algunos elementos de anclaje productions
como este:
for(var j=0;j<productions.length;j++){
productions[j].addEventListener('click',production_e,false);
}
Problema: esto funciona, pero cuando lo cambio a 'mousedown' sigue el enlace de anclaje predeterminado después de realizar todas las recuperaciones de XHR.
La función production_e () prueba para qué se hace clic en "producción" y luego verifica si contiene la descripción de la producción. Si no, inicia un XHR para recuperar la descripción y la inserta en el elemento de producción.
function production_e(e) {
e.preventDefault();
if(!current_show) {
current_show = this;
if(!this.getElementsByClassName('production_description')[0])
get_production_article(this,show_description);
}
}
get_production_article = function(production,callback) {
var req = new XMLHttpRequest();
req.onreadystatechange = function(e) {
if(req.readyState === 4 && req.status === 200) {
install_article(production,req.responseText);
callback(production);
}
}
var pl = production.getElementsByClassName('production-link')[0];
req.open('GET',pl.href + '-article',true);
req.send();
}
La función install_article
simplemente inserta el ResponseText en el DOM y la función de devolución de llamada, que es show_description
establece el estilo para exponer el elemento.
Sin embargo, cuando uso mousedown
, un clic izquierdo del mouse parece realizar las mismas tareas pero luego sigue el enlace de anclaje predeterminado a otra página. Curiosamente, un clic derecho del mouse funciona como esperaría que se realizara el clic izquierdo del mouse.
Supongo que de alguna manera la función preventDefault () no pasa o se vuelve a activar, pero no veo cómo está sucediendo eso. ¿Qué me estoy perdiendo?
2 respuestas
Bueno, evitar los valores predeterminados del mousedown no evitará que ocurra el evento click
y sus valores predeterminados. También deberá escuchar el evento click para evitar el comportamiento predeterminado click
.
Por lo general, trato de evitar los enlaces para hacer XHR a menos que desee dejar la opción para las personas que no ejecutan JavaScript. En su lugar, usaría un botón y lo diseñaría como un enlace si fuera necesario, y puede establecer un atributo data-xxx para cualquier información que desee usar para su XHR.
<button data-article="id0123" type="button" >Article 123</button>
Entonces puedes usar: e.currentTarget.dataset.article
Vea si este codepen ayuda: http://codepen.io/pituki/pen/gtCus
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.