Вопрос по 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';
    }
}​

Тело:

 <div>
   <table id="table-1" >
   <tr><td>
      <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>
   </td></tr>
   </table>
</div>
​

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

Ваш Ответ

4   ответа
0

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

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

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

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

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

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

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

Пример использованияtouchstart: http://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(); 
});
Большое спасибо @Tim Medora. Вы спасли меня!
Большое вам спасибо, ребята. У меня нет опыта работы с jQuery, но ответ Тима делает меня достаточно удобным, чтобы использовать этот метод. Это также чище, чем у меня, намного легче читать :-) ntmw
Вы видели мое обновление? я согласна с тем чтоtouchstart Скорее всего, лучшее решение.
Нет проблем. Обратите внимание, что jQuery не являетсяnecessary чтобы это работало, но это значительно облегчает привязку / обработку событий в разных браузерах (и обычно приводит к более лаконичному коду).
Этот ответ правильный, но хотелось бы отметить, что простое решение - использовать событие Touchstart. Тем не менее, имейте в виду, что событие щелчка по-прежнему срабатывает примерно через 300 мс (по крайней мере, на некоторых устройствах, таких как Android). Если контент под начальным прикосновением заменяется новым, этот новый контент получит «клик». событие.
2

Implement touchend Event Handlers

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

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

    //code here...

});

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