Использование события mousedown на мобильном устройстве без jQuery mobile?

Ответ 1

Вы ищете touchstart и touchend. Это события, которые vmousedown и vmouseup пытаются имитировать.

Вот пример:

window.onload = function() {
    //preload mouse down image here via Image()
    $("#button_img").bind('touchstart', function(){
        $("#button_img").attr("src","button_on.png");
    }).bind('touchend', function(){
        $("#button_img").attr("src","button_off.png");
    });
}

Это будет работать без каких-либо фреймворков на любом устройстве, поддерживающем события касания. Вы можете использовать что-то вроде Modernizr для выполнения этого теста, и если устройство не поддерживает события касания, привязывайтесь к обычным событиям на рабочем столе.

Когда вы используете touchstart/touchend/touchmove, вы получаете интересную информацию, например, сколько прикосновений происходит сразу, поэтому вы можете определить, прокручивается ли пользователь или пытается увеличить масштаб.

UPDATE

Так как объект event внутри обработчика событий отличается для событий касания и событий мыши, если вы хотите знать координаты события в любом случае, вы можете сделать что-то вроде этого (пример ниже предполагает загрузку Modernizr)

//determine which events to use
var startEventType = 'mousedown',
    endEventType   = 'mouseup';

if (Modernizr.touch === true) {
    startEventType = 'touchstart';
    endEventType   = 'touchend';
}

//bind to determined event(s)
$("#button_img").bind(startEventType, function(event) {

    //determine where to look for pageX by the event type
    var pageX = (startEventType === 'mousedown')
                ? event.pageX
                : event.originalEvent.touches[0].pageX;

    ...
})...

UPDATE

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

//bind to determined event(s)
$("#button_img").bind('mousedown touchstart', function(event) {

    //determine where to look for pageX by the event type
    var pageX = (event.type.toLowerCase() === 'mousedown')
                ? event.pageX
                : event.originalEvent.touches[0].pageX;

    ...
})...

Если вы беспокоитесь о получении обоих событий в быстрой последовательности, вы можете использовать таймаут для дросселирования обработчика событий:

//create timer
var timer = null;

//bind to determined event(s)
$("#button_img").bind('mousedown touchstart', function(event) {

    //clear timer
    clearTimeout(timer);

    //set timer
    timer = setTimeout(function () {

        //determine where to look for pageX by the event type
        var pageX = (event.type.toLowerCase() === 'mousedown')
                    ? event.pageX
                    : event.originalEvent.touches[0].pageX;

        ...

    }, 50);
})...

Примечание. Вы можете быстро форсировать события mousedown и touchstart с помощью инструментов разработчика, но я не уверен в этом случае использования в реальном мире.

Ответ 2

Вы считали, что вместо того, чтобы использовать кнопки вместо CSS? состояние :active будет срабатывать, когда пользователь нажимает/прикасается к элементу. Вот пример:

/* Default state */
#button_img {
    background-image: url('button_off.png');
}

/* Clicked/touched state */
#button_img:active { 
    background-image: url('button_on.png');
}

CSS будет намного более результативным, и вы также сможете лучше разобраться в проблемах (отображение против логики и т.д.).

JSBin: http://jsbin.com/beyin/1/

Ответ 3

Существует способ получить функции jQueryMobile vmouseup, vmousedown, vmousemove, vclick и т.д., не получая все остальные (и особенно побочные эффекты) jquerymobile (т.е. css и т.п.)

• Перейдите в http://jquerymobile.com/download-builder/ (инструмент для загрузки пользовательской сборки jquerymobile только с теми компонентами, которые вам нужны)
• выберите ТОЛЬКО "Виртуальная мышь (vmouse) Bindings"
• загрузите его.

Загрузка будет содержать только один файл .js(как в минимизированной, так и в несжатой версии). Нет css.

Свяжите этот script в заголовке html после простого jquery и используйте его следующим образом:

<head>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
  <script src="whatever/path/jquery.mobile.custom.min.js"></script>
  <script>
    $(function(){ // or replace this with window.onload for that matter
      // Your code here, e.g.
      $("#button_img").on("vmousedown", function() { 
        /*whatever*/
      });
      // CAUTION: this won't work (see note below):
      // $("#button_img").vmousedown(function(){/*whatever*/}); // WON'T WORK
    });
  </script>
</head>

ПРИМЕЧАНИЕ: методы .vmousedown(), .vmouseup() и т.д. не будут работать. Вы должны привязать прослушиватель событий с помощью .on("vmousedown", ...). Не знаю, почему: Я думаю, это связано с тем, что часть jquerymobile, которая создает методы быстрого доступа с тем же именем, что и события, находится в каком-то другом модуле. Возможно, можно определить, какой модуль он есть, и включить его в загрузку, но я думаю, что это заставит вас включить другие нежелательные зависимости.