$(documento).haga clic en () no funciona correctamente en el iPhone. jquery [duplicar]]
Esta pregunta ya tiene una respuesta aquí:
Esta función funciona perfectamente en IE, Firefox y Chrome, pero cuando está en el iPhone, solo funcionará al hacer clic en un <img>. Al hacer clic en la página (en cualquier lugar excepto en un img) no disparará el evento.
$(document).ready(function () {
$(document).click(function (e) {
fire(e);
});
});
function fire(e) { alert('hi'); }
La parte HTML es extremadamente básico y no debería ser un problema.
¿Alguna idea?
8 answers
Respuesta Corta:
<style>
.clickable-div
{
cursor: pointer;
}
</style>
Respuesta más larga:
Es importante darse cuenta de que si solo está utilizando etiquetas <a> todo funcionará como se espera. Puede hacer clic o arrastrar por error en un enlace regular <a> en un iPhone y todo se comporta como el usuario esperaría.
Imagino que tiene HTML arbitrario que no se puede hacer clic, como un panel que contiene texto e imágenes que no se pueden envolver con <a>. Me enteré de esto problema cuando tenía un panel tal que quería ser totalmente clickable.
<div class='clickable-div' data-href="http://www.stackoverflow.com">
... clickable content here (images/text) ...
</div>
Para detectar un clic en cualquier lugar dentro de este div estoy usando jQuery con un atributo html data-href que se muestra arriba (este atributo es inventado por mí mismo y no es un atributo estándar de datos jQuery o HTML.)
$(document).on('click', '.clickable-div', function() {
document.location = $(this).data('href');
});
Esto funcionará en su navegador de escritorio, pero no en el iPad, sin importar cuánto haga clic.
Usted puede estar tentado a cambiar su controlador de eventos de click a click touchstart - y esto de hecho activa el controlador de eventos. Sin embargo, si el usuario quiere arrastrar la página hacia arriba (para desplazarse), también la activará, lo cual es una experiencia de usuario terrible. [es posible que haya notado este comportamiento por sneaky banner ads]
La respuesta es increíblemente simple: Simplemente establece el css cursor: pointer.
<style>
.clickable-div
{
cursor: pointer;
}
</style>
Esto tuvo el beneficio adicional para los usuarios de escritorio al indicar que el área se puede hacer clic con un icono de mano.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-15 23:30:30
Agregar el siguiente código funciona.
El problema es que los iPhones no generan eventos de clics. Plantean eventos "táctiles". Muchas gracias apple. ¿Por qué no podían simplemente mantenerlo estándar como todos los demás? De todos modos, gracias Nico por el consejo.
Crédito a: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript
$(document).ready(function () {
init();
$(document).click(function (e) {
fire(e);
});
});
function fire(e) { alert('hi'); }
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type = "mousemove"; break;
case "touchend": type = "mouseup"; break;
default: return;
}
//initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-17 13:58:10
Cambiar esto:
$(document).click( function () {
A esto
$(document).on('click touchstart', function () {
Tal vez esta solución no encaja en su trabajo y como se describe en las respuestas esta no es la mejor solución para aplicar. Por favor, compruebe otras correcciones de otros usuarios.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-02 15:52:40
Prueba esto, se aplica solo a iPhone y iPod por lo que no está haciendo que todo se vuelva azul en chrome o firefox móvil;
/iP/i.test(navigator.userAgent) && $('*').css('cursor', 'pointer');
Básicamente, en iOS, las cosas no son "clickables" por defecto're son "tocables" (pfffff) por lo que las haces "clickables" dándoles un puntero cursor. tiene todo el sentido, ¿verdad??
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-24 20:05:46
CSS Cursor:Pointer; es una gran solución. FastClick https://github.com/ftlabs/fastclick es otra solución que no requiere que cambie css si no quería Cursor:Pointer; en un elemento por alguna razón. Yo uso fastclick ahora de todos modos para eliminar el retraso de 300ms en dispositivos iOS.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-27 22:57:40
Use jQTouch en su lugar-la versión móvil de jQuery
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-09-14 03:38:40
En iOS móvil, el evento de clic no aparece en el cuerpo del documento y, por lo tanto, no se puede usar con .eventos live (). Si tiene que usar un elemento no nativo capaz de hacer clic como un div o sección es usar cursor: pointer; en su css para el no-hover en el elemento en cuestión. Si eso es feo, podrías buscar en delegate ().
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-06 21:41:30
Incluya esto en su proyecto. Compruebe el "Readme" en github. https://github.com/tomasz-swirski/iOS9-Safari-Click-Fix
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-18 10:00:14