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?

1
Rob 3 sep. 2014 a las 01:29

2 respuestas

La mejor respuesta

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.

1
plalx 2 sep. 2014 a las 21:41

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

0
user2428775 3 sep. 2014 a las 14:06