Javascript se ejecuta dos eventos – onkeypress y onclick

Problema es que cuando presiono una tecla sobre un botón de radio, elemento MyFunc se dispara dos veces – una vez por «onkeypress» evento, otra vez para el evento «click».

Pregunta «¿Por Qué?» Necesito manejar esto de dos maneras diferentes, pero ahora no puedo reconocer lo que el evento inicial era. Cuando hago clic en un ratón, dispara justo para el evento «click».

<ul>
    <li>
        <input type="radio" onkeypress="MyFunc(event, this)" onclick="MyFunc(event, this)" name="myList" id="MyId_1" />Topic 1
        <input type="radio" onkeypress="MyFunc(event, this)" onclick="MyFunc(event, this)" name="myList" id="MyId_2" />Topic 2
    </li>
</ul>

function MyFunc(e, obj) {
    alert(e.type); //alerts "keypress" and then "click"
    //Do my stuff
}

Gracias por la ayuda!

InformationsquelleAutor podeig | 2010-03-02

7 Kommentare

  1. 1

    Se puede hacer y sin tener que recurrir a marcos, que siempre son voluminosos y lento. El truco es el registro de lo que sucedió en qué momento y, a continuación, en la parte superior de que, para trabajar dentro de un marco de tiempo. Cuando se desencadene el keypress caso de que el click evento se activa inmediatamente después, aquí está una lista de cómo rápidamente el click evento se desencadena después de la keypress evento…

    Chrome 39.0: 0ms

    Firefox 31.0 ESR: 18~20 ms

    Es decir, 11 de: 2~4 ms

    Ópera 12.1: 0ms

    Chrome y (real) de la Ópera de no esperar, es decir, que es razonablemente rápido y Firefox toma su tiempo, por así decirlo; el rango de trabajar (al menos en mi sistema) es de 0~20 ms. Mediante programación me voy a fijar el límite a 50ms para que la gente sigue utilizando junky equipos que están demasiado ocupados con el 150 inútil procesos en segundo plano.

    Nota usted tendrá que utilizar el window nivel global eventos a pesar de esto parece funcionar de forma fiable para mí en todos los navegadores que he mencionado.

    var option = new function() {this.name = '';}
    
    
    window.onclick = function(event)
    {
     option.clickDate = new Date().getTime();
    }
    
    
    window.onkeypress = function(event)
    {
     option.keyCode = event.keyCode;
     option.keyCodeDate = new Date().getTime();
    }
    
    
    function MyFunc(e,obj)
    {
     if (option.keyCodeDate && option.clickDate && 
     (
      (option.clickDate - option.keyCodeDate)>=0 && 
      (option.clickDate - option.keyCodeDate)<51)
     {alert('keypress event');}
     else {alert('click event');}
    }
  2. 1

    Si 2 eventos que se desencadenan durante pulsando una tecla, a continuación, compruebe event.detail propiedad en onClick función.
    si event.detail = 0 entonces significa que el ratón no se ha hecho clic en ese elemento y podemos ignorarlo.
    evento.detalle

    • Esto funciona muy bien! gracias una tonelada!!
  3. 1

    La onclick Evento es disparado cuando el botón de radio se selecciona. Desde que se selecciona pulsando una tecla, ambos eventos serán despedidos. Primero el onkeypress evento y, a continuación, el onclick evento.

    • Pero, ¿cómo evitar que esto se produzca?
    • Usted no puede evitar este comportamiento, ya que lo que yo sé.
    • Es muy extraño. ¿Cuál es el punto para manejar estos eventos juntos? :-/
  4. 0

    se podría añadir un 3er parámetro a la función

    function MyFunc(e, obj, click) {
        if (click) { } //do stuff
        else { } //do other stuff
    }

    Ahora agregar en un bool para tus eventos…

    <input type="radio" onkeypress="MyFunc(event, this, false)" onclick="MyFunc(event, this, true)" name="myList" id="MyId_1" />Topic 1
    <input type="radio" onkeypress="MyFunc(event, this, false)" onclick="MyFunc(event, this, true)" name="myList" id="MyId_2" />Topic 2
    • El problema es que se disparan simultáneamente. Puedo reconocer lo que se hizo clic utilizando el correo.tipo de propiedad. Devuelve «keypress» o «hacer clic».
  5. 0

    Me gustaría crear dos controladores independientes: uno para el evento click y uno de ellos pulsación de tecla.

    A continuación, sus controladores puede extraer lo que usted necesita desde el evento y llamar a una tercera función que tiene la lógica común.

    Su onkeypress tendría que ignorar el evento por el espacio y la tecla de entrada. No entiendo por qué usted está escuchando el evento keypress, aunque. Podría usted comentar? Si se le explica lo que va a hacer, tal vez podamos ser más útil.

  6. 0

    Un evento clave es para el teclado sólo los usuarios a activar un botón, pero si estás usando un botón de «clic» debe ser el único caso que sea necesario como se despiden cuando se presiona la BARRA de ESPACIO. Si usted tiene eventos en un control personalizado, «clave» evento » y «haga clic en» tanto puede ser utilizado y no el fuego juntos.

  7. -1

    Uso onMouseDown en lugar de onclick JavaScript y por consistencia, agregar evento onKeyPress aquí también – tomando el caso de la etiqueta HTML.

    Sudo Código:

    var myRadioButton = document.getElementById('radio');
    
    myRadioButton.addListener("radioClick",onMouseDown);
    myRadioButton.addListener("radioKey",onKeyPress);
    
    radioClick()
    {
     //code to do stuff
    }

    Retirar jQuery: http://jquery.com/ para el código real y fácil forma de escribir JavaScript.

    • Voy a tratar. Creo que traté de onMouseDown, pero he trabajado como OnClick. Tal vez addListener ayuda. Volveré pronto con los resultados.
    • He probado esta solución usando jQuery. No sirvió de nada. «OnMouseDown» no disparó nada. Simplemente no llame a mi función. Si he de usuario «OnClick» con addListener da el mismo problema. Yo no tengo ninguna solución. Alguna idea?
    • Grande que usted ha mencionado la consistencia, pero luego se bombardeó por lo que sugiere un marco. Si yo había buscado este problema a través de Google esta página no han llegado porque yo-jquery para encontrar respuestas, no de dumping ancho de banda de los usuarios. Por favor, seguir a real JavaScript.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea