работает mousedown / mouseup в jquery для ipad?

Question

Я использую текущий код:

$('body').mousedown(function() {
        $('div#extras').fadeTo('fast', 1);
});

$('body').mouseup(function() {
        $('div#extras').delay(2000).fadeTo(1500, 0);
});

Это прекрасно работает в сафари, но когда я загружаю его и проверяю на ipad, оно не работает?

Answer 1

Я узнал, как это сделать для ipad для тех, кто интересуется:

Вместо кода, который я использовал в моем вопросе, вы должны использовать:

$('body').bind( "touchstart", function(e){
        $('div#extras').fadeTo('fast', 1);
});

&

$('body').bind( "touchend", function(e){
        $('div#extras').delay(2000).fadeTo(1500, 0);
});

Answer 2

Не совсем.

Документы Apple

Цитата:

Кликабельный элемент - это ссылка, элемент формы, область карты изображенияили любой другой элемент с mousemove, mousedown , mouseup или обработчиками onclick.Прокручиваемый элемент - это любой элемент с соответствующим стилем переполнения, текстовыми областями и прокручиваемыми элементами iframe.Из-за этих различий вам может понадобиться изменить некоторые из ваших элементов на интерактивные элементы, как описано в « Создание элементов кликабельных », чтобы получить желаемое поведение в iPhone OS.

(выделение мое)

Answer 3

Не совсем отвечаю на ваш вопрос, но может пригодиться людям, которые пришли сюда просто для поиска 'jQuery mousedown / mouseup на ipad'

Я всегда использую этот маленький трюк:

$(element).hover(function() {
   // Do something
});

Это срабатывает при касании при использовании iPad и отменяет действие при нажатии за пределами элемента , поскольку это событие при наведении курсора.Так, например:

// Assuming the element has 'opacity: 0' in CSS

$(element).hover(function() {
   $(this).animate({'opacity': 1}, 200);
});

Создает эффект затухания «при щелчке» и эффект затухания «при наведении мыши».

Answer 4

Старый пост, но есть универсальное решение:

$('body').on('mousedown touchstart',function(e){
    $('div#extras').fadeTo('fast', 1);
});
$('body').on('mouseup touchend',function(e){
    $('div#extras').delay(2000).fadeTo(1500, 0);
});