Objetivo

Para cerrar el div padre de una etiqueta de anclaje cuando se hace clic. En el código siguiente, quiero ocultar div performance_tt cuando el usuario hace clic en la etiqueta de anclaje close_performance_tt.

Problema

Incapaz de conseguir que funcione en los dispositivos iOS después de pasar varias horas en ella. Funciona bien en todo lo demás, incluso un dispositivo BlackBerry 10.

<div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;">
    <div>Website performance has become an important consideration for most sites.
    The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention.
    As a result, creating a system that is optimized for fast responses and low latency is key.</div>
    <a id="close_performance_tt" href="#">Close</a>
    <script>
    var userAgent = navigator.userAgent.toLowerCase();
    var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
    if (isiOS) {
        $("#close_performance_tt").bind('touchstart', function() {
            alert('Touch-start event triggered');
        });
    } else {
        $("#close_performance_tt").bind('click', function() {
            alert('Click event triggered');
        });
    }
    </script>
</div>
¿por qué no utilizar $("#close_performance_tt").bind('click touchstart', ..) en lugar de la if..else
Pero esa no es la causa del problema, ¿verdad?
usted tiene que asegurarse de que la bandera isiOS tiene el valor correcto

OriginalEl autor KalC | 2013-08-13

3 Comentarios

  1. 15

    Definir un clickhandler que usted puede utilizar más adelante:

    var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");
    
    $("a").bind(clickHandler, function(e) {
        alert("clicked or tapped. This button used: " + clickHandler);
    });

    Esto desencadenará haga clic en dispositivos no táctiles y touchstart en dispositivos táctiles.

    Cuando de lo que se dice, recomiendo el uso de Rápido haga clic en en su lugar, y el uso regular, haga clic en eventos. Con la solución anterior, se activarán «touchstart» en los enlaces cuando se desliza el dedo para desplazarse por la página, por ejemplo – que no es lo ideal.

    Esto es una mala idea cuando el usuario tiene un dispositivo táctil con el ratón conectado…

    OriginalEl autor curly_brackets

  2. 2

    En iOs a etiqueta es un clickable elemento, toque en el enlace que se va a desencadenar los eventos de ratón (incluyendo click).

    Este código

    $("#close_performance_tt").bind('click',function() { 
        alert('Click event triggered');                             
    }); 

    funcionará bien en iOs.

    Para obtener más información: http://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

    Si puedo usar su código, necesito haga clic dos veces antes de obtener la alerta. Posteriormente, necesito haga clic en alrededor de 4 veces para la alerta para mostrar. Sin embargo con el siguiente código, la alerta se activa todo el tiempo. $(«#close_performance_tt»).bind(‘click touchstart’,function() { alert(‘Evento registrado.’); });
    Acabo de probar el código en mi iPad, funciona bien. Asegúrese de hacer un solo toque, si usted tiene una o dos veces no lo puedo activar la click evento.
    No tengo un iPad. Las pruebas en el iPhone 4S. No trabajo. Voy a probar en un iPad en un par de horas. Va a volver.
    kalC: gracias por la prueba, realmente me ayudó.

    OriginalEl autor BMH

  3. 2

    Ver http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

    Para iOS eventos de ratón como en no bubbe a menos que:

    • El elemento objetivo del evento es un enlace o un campo de formulario.
    • El elemento de destino, o de alguno de sus antepasados hasta, pero no incluyendo , tiene una explícita controlador de eventos a ninguno de los eventos de ratón. Este controlador de eventos puede ser una función vacía.
    • El elemento de destino, o de alguno de sus antepasados hasta e incluyendo el documento tiene un cursor: puntero declaraciones CSS.

    La solución más fácil para mí es aplicar cursor: pointer en todas partes en el caso de un iOS dispositivo táctil. Como no hay cursor no tiene ningún impacto visual

    muy útil la respuesta de los chicos, por favor, preste atención a esto! gracias, Sebastián

    OriginalEl autor Sebastien Lorber

Dejar respuesta

Please enter your comment!
Please enter your name here