Вопрос по javascript, ipad, onmouseover – Медленный ответ на событие клика на iPad

14

Я сделал демонстрацию концепции фотографии, которая переключается между двумя изображениями, чтобы показать разницу между ними.

У нас есть событие onMouseClick, которое отлично работает, за исключением iPad. Ответ на моем рабочем столе мгновенный, но на планшете довольно задерживается, может быть, 500 мс?

Это нормально? Есть ли другой способ справиться с этим?

Javascript:

var img1 = new Image();
img1.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";

var img2 = new Image();
img2.src = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";


function test() {
    if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg') {

        document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg';
    }
    else if (document.pic.src == 'http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg') {

        document.pic.src = 'http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg';
    }
}​

Тело:

 
   
   
      <img id="img" src="http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg" name="pic" onmousedown="test()">
       <img id="png1" src="http://www.thedigitaltrekker.com/wp-content/uploads/2012/03/logo-6smA.png">
Click on the image above to toggle between 19mm and 200mm <br>
   
   

​

Также на jsfiddle:http://jsfiddle.net/ntmw/R4pey/5/

Ваш Ответ

4   ответа
2

Реализовать обработчики событий

В отличие отщелчок а такжеtouchstart,touchend события запускаются мгновенно без задержки 300 мс. Это может быть практичным, если выРазрабатывая только сенсорную игру на основе WebGL или Canvas, вы не можете полагаться только на прикосновения на стандартных веб-страницах.

$('#id').on('touchstart',function(e) {                

    //code here...

});
15

чтобы жесты / смахивание работали правильно. Например, когда вы касаетесь элемента, вы можете прокрутить всю страницу, а не запускать событие click для элемента. Для достижения более тонкого контроля используйте сенсорные события.

Увидеть:https://developer.mozilla.org/en-US/docs/DOM/Touch_events

Пример использования:touchstarthttp://jsfiddle.net/R4pey/7/.

Обратите внимание, что захват событий касания имеет последствия, например, Вы можете переопределить поведение, которое ожидает пользователь (например, смахивание).

Также обратите внимание, что вы обычно должны связывать свои события независимо от разметки (не встроенной), чтобы добиться более четкого разделения разметки и сценария.

Вот'пример используя jQuery, который связывает события отдельно от разметки и обрабатывает обаclick а такжеtouchstart События. Протестировано в Chrome 21, FF 15, IE9 и на iPad 3.

var url1 = "http://watkinsfilm.com/wp-content/uploads/2012/09/19mm.jpg";
var url2 = "http://watkinsfilm.com/wp-content/uploads/2012/09/200mm.jpg";

// preload from original code
var img1 = new Image();
img1.src = url1;

var img2 = new Image();
img2.src = url2;

// bind the click and touchstart events
$("#img").on("click touchstart", function(e){
    if (this.src == url1) {
        this.src = url2;
    }
    else if (this.src == url2) {
        this.src = url1;
    } 

    // When touch event fires, this is needed to prevent the click
    // event from firing as well as @RyanWheale noted in the comments.
    e.preventDefault(); 
});
@TimMedora - Аплоги - пока я сканировал, думаю, я заметил тольконажмите» в привязке события. Я в основном хотел отметить, чтонажмите» Событие все равно будет запущено. Таким образом, с вашим решением вы получите двойное событие на некоторых сенсорных устройствах. Ryan Wheale
Большое вам спасибо, ребята. Я неУ меня нет опыта работы с jQuery, но Тимs ответ делает меня достаточно удобным, чтобы использовать этот метод. Это'Также чище, чем у меня, намного легче читать :-) ntmw
Кто-нибудь может помочь мне сделать это работает без JQuery? С помощью$(link).on("click touchstart", downKey); оно работает. Но используяlink.addEventListener("touchstart", downKey);link.addEventListener("click", downKey); Безразлично»т работа. В функции DownKey я используюevent.preventDefault(); return false; Я добавил jQuery только для тестирования, но я не хочу использовать его в этом проекте. robsonrosa
Этот ответ правильный, но хотелось бы отметить, что простое решение - использовать событие Touchstart. Тем не менее, имейте в виду, что событие click все равно будет срабатывать примерно через 300 мс (по крайней мере, на некоторых устройствах, таких как Android). Если контент под начальным прикосновением заменяется новым, этот новый контент получит "нажмите» событие. Ryan Wheale
0

Например, я использую HTML5-градиенты и тени (также изображения) на своем сайте и заметил огромную разницу в ответах при удалении изображений.

Прикрепленное событие щелчка работает нормально, но реакция медленная, потому что Safari, кажется, занят изображениями (перерисовывает его постоянно).

Я использовал iPad3, чтобы проверить это. Парень написал интересную статью о проблемах с изображением на IOS.

Увидеть:http://roman.tao.at/dev/mobile-safari-memory-usage-with-images/

@ntmw: спасибо за исправление грамматики Codebeat
Нет проблем. Спасибо за ответ. Я понятия не имел, что у устройств iOS были такие проблемы. Я проверил статью, может быть, немного выше меня, ясохраню его на потом в будущем :-) ntmw
2
Похоже, ссылка на статью исчезла. Grant McLean

Похожие вопросы