Eventos comunes

Notas importantes:

• touchcancel solo se activa en situaciones específicas, como interrupciones por llamadas.
• Los eventos tap y longpress generalmente se excluyen mutuamente; solo uno se dispara.

Diferencia entre currentTarget y target

En el objeto del evento, currentTarget se refiere al componente que tiene el manejador de eventos vinculado, mientras que target es el componente que realmente desencadenó el evento. Esto es particularmente útil en componentes anidados.

Pasar parámetros en eventos

Para enviar datos desde la vista (WXML) al controlador (JS) cuando ocurre un evento, se usa el atributo data-*:

1. Formato: data-nombre-del-atributo="valor"
2. Acceso: e.currentTarget.dataset.nombreDelAtributo

Diferencia entre touches y changedTouches

• touches: Lista de todos los dedos que están actualmente tocando la pantalla.
• changedTouches: Lista de dedos que cambiaron de estado (iniciaron, movieron o finalizaron el toque) en el evento actual.

Métodos para vincular eventos

Método 1 (recomendado): con dos puntos

WXML:

<button bind:tap="manejadorClick" data-nombre="{{nombre}}" data-edad="18" id="btn">Pulsar</button>

JS:

Page({
  data: {
    nombre: "Ana"
  },
  manejadorClick: function(e) {
    console.log("Botón presionado", e);
  }
});

Método 2: sin dos puntos

WXML:

<view bindtap="otroManejador">Elemento tocable</view>

JS:

Page({
  otroManejador: function(e) {
    console.log("Elemento presionado", e);
  }
});

Pasar parámetros y actualizar datos

Para pasar parámetros y modificar el estado, se usa setData:

WXML:

<button bind:tap="incrementar">Presionaste {{contador}} veces</button>

JS:

Page({
  data: {
    contador: 0
  },
  incrementar: function() {
    this.setData({
      contador: this.data.contador + 1
    });
    console.log("Incremento realizado");
  }
});

Propagación y captura de eventos

• capture-bind:tap="manejador1": Fase de captura, ejecuta de afuera hacia adentro.
• bind:tap="manejador2": Fase de burbujeo, ejecuta de adantro hacia afuera.
• catch:tap="manejador3": Detiene la propagación del evento en la fase de burbujeo.
• capture-catch:tap="manejador4": Detiene la propagación en la fase de captura, incluyendo el propio manejador.

Ejemplo de detención con catch

Si se usa catch:tap en un eleemnto, el evento no se propagará a contenedores superiores.