javascript - Evento jqplotClick en la serie jqPlot(dispositivos iOS navegador Safari)

jquery onclick

Question

Tengo algunos problemas al hacer clics de acción en elementos de jqPlot, y espero que alguien más pueda arrojar algo de luz sobre lo que está pasando mal.

Tengo un gráfico de barras renderizado con jqPlot, que adjunta un controlador de evento click a (en el gráfico jqPlot) usando el siguiente código:

$.jqplot.eventListenerHooks.push([''jqplotClick'', myClickHandler]);

myClickHandler se ve así:

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
  alert(''you have triggered click action'');
}

Mi intención es que al usar esta implementación simple de jqPlot, la acción de alerta se active cuando se entregue un clic en el área dentro del gráfico, incluido el elemento del gráfico de barras. Esto funciona perfectamente en cualquier navegador de escritorio (IE6 / 7/8/9, Chrome, Safari).

El problema que estoy teniendo, sin embargo, es que cuando accedo al sitio usando iPhone / iPad, todo se procesa perfectamente, excepto que la acción de clic especificada anteriormente se comporta de manera extraña.

Si trato de tocar cualquier elemento del gráfico de barras, no alerta ''has activado acción de clic'', como si nada estuviera sucediendo .

Sin embargo, cuando traté de hacer clic (tocar) en el espacio vacío del gráfico, el mensaje de alerta se dispara normalmente.

¿Algunas ideas?

Answer 1

Debería poder resolver este problema haciendo exactamente lo que @PriorityMark sugiere, es decir, configurando, explícitamente, el valor de z-index en jqplot-event-canvas .

La forma en que podría hacerse se muestra, por ejemplo, en esta respuesta donde el problema era de naturaleza similar. Ahí después de mis cambios iniciales, es decir, el envío de jqplot-overlayCanvas-canvas detrás de jqplot-series-canvas , olvidé poner el jqplot-event-canvas al frente.

Answer 2

No sé acerca de jqplot, pero en general, hay mucho más en medio de mousedown y click eventos en dispositivos táctiles. Hay una mayor posibilidad de "perder" el clic antes de que el evento de click finalmente se dispare. mousedown , o en su caso ''jqplotMouseDown`, podría ser una mejor apuesta para usted.

Answer 3

$.jqplot.eventListenerHooks.push([''jqplotClick'', myClickHandler]);

Esta llamada se adjuntará al controlador Click en todo el lienzo del evento. (Este lienzo de evento tiene el tamaño de la gráfica y debe estar SOBRE EL resto de los lienzos para que funcione, lo que significa que es posible que deba modificar manualmente su índice z para que todo funcione). Lo que creo que está sucediendo en su caso es esto:

1. Está adjuntando el método "myClickHandler" al lienzo del evento. Se activará cada vez que se haga clic en un lienzo de evento, sin importar dónde: sobre la serie o sobre el fondo de la trama.

2. En el caso del representador de barras, este lienzo de evento está debajo del lienzo de la serie (ya sea que se haya creado antes del lienzo de la serie o tenga un índice Z más bajo). La solución sería aumentar manualmente el índice z del lienzo del evento DESPUÉS de que se haya creado el gráfico. Después de esto, estará en la parte superior y los eventos de clic se manejarán correctamente.

3. Recuerde, este evento de clic se disparará en cada clic sobre la trama, sin importar dónde. La solución sería filtrar la ejecución del método "myClickHandler" de esta manera:

Código:

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
    if (isClickEventOverTheSeries(gridpos)) {
        alert(''you have triggered click action'');
    }
}

En este ejemplo, gridpos es una matriz que contiene 2 puntos: coordenadas xey del evento click. El método " isClickEventOverTheSeries " es una función que verifica si bajo estas coordenadas hay series dibujadas. No estoy seguro de cómo lograr esto con el renderizador de BarChart: nunca lo usé, pero con el renderizador de líneas hay un método que lo verifica ...

Espero que esto ayude