Вопрос по jquery-mobile, javascript, jquery, mouseevent – Используете событие mousedown на мобильном телефоне без jQuery mobile?

26

Я создал веб-приложение, и для некоторой полировки я хотел добавить обработчики mousedown и mouseup для обмена изображениями (в этом случае, чтобы кнопка выглядела так, как будто она нажата).

мой код примерно такой:

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

Это работает плавно на настольном компьютере, но на мобильном устройстве (тестирование в iOS Safari) события mousedown и mouseup происходят одновременно, поэтому практически ничего не происходит.

Я пытался использовать события vmousedown и vmouseup в jQueryMobile, однако этот код:

//include jquerymobile.js and jquerymobile.css 
window.onload = function() {
    //preload mouse down image here via Image()
    $("#button_img").vmousedown(function(){$("#button_img").attr("src","button_on.png");});
    $("#button_img").vmouseup(function(){$("#button_img").attr("src","button_off.png")});
}

Просто дал мне ошибки, которые vmousedown и vmouseup не существуют. Кроме того, jQueryMobile переопределяет CSS, который я уже написал для этой страницы.

Так есть ли способ заставить работать vmousedown и vmouseup, и сделать это без CSS jQuery Mobile?

Эй, приятель! У вас есть ответ ниже, и все в порядке. Но обратите внимание, просто на заметку: использование изображений на кнопках не лучший пользовательский опыт, попробуйте использовать только CSS. Вы можете найти хороший стиль кнопок на Getbootstrap.com / компоненты и многие другие фреймворки и даже создание собственного стиля. Попытайся! тебе понравитс Guilherme Ferreira
@ Guilherme: Как вы знаете, существуют веские причины для использования изображений на кнопках. В моем случае я имитирую физическое переключение с помощью SVG, что было бы невозможно сделать с помощью только CSS. Но я также не манипулирую стилем кнопки напрямую. Все, что я делаю, это добавление и удаление имени класса. user128216
Nice: D изображение не плохое, просто не всегда лучший вариант. В этом случае, даже если это возможно, я бы тоже использовал image. Guilherme Ferreira

Ваш Ответ

3   ответа
4

Рассматривали ли вы стиль ваших кнопок вместо 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

Я не знаю, почему этот ответ был отвергнут, действительно, и я согласен, что это не то, о чем просил стартер, а, в частности, принимая во внимание, что сам запрос касается обмена изображениями (и, честно говоря, с точки зрения просьба у него вроде бы не знать о нескольких понятиях) Я полностью поддерживаю этот ответ. Также я хочу добавить, что JS чрезвычайно злоупотребляют для задач, которые полностью имеют право на CSS. Это поведение должно быть полностью искоренено, и я призываю людей использовать CSS для рендеринга (что также быстрее) и оставляю JS делать то, для чего он предназначен: быть контроллером. MacK
Я отклонил ответ, потому что он не имеет ничего общего с ответом на вопрос, который касается очень специфической проблемы с событием vmouse, и этот ответ предлагает даже не использовать события. Это может быть решением для конкретного примера, приведенного в вопросе, но оно не решает вопрос и не будет применяться к любому случаю использования, когда необходимо событие. Правильным местом для такого предложения будет КОММЕНТАРИЙ на этот вопрос. Если бы это был комментарий, я бы даже проголосовал за него. Сколько знаний показывает ОП, не имеет значения; ответы для всех, а не только для ОП. matteo
@ matteo ОП в первом предложении говорит: «Для небольшого блеска я хотел ... поменять изображения (в данном случае, чтобы кнопка выглядела как нажатая)». Они спрашивают, как это сделать, но уже пошли по определенному пути, используя jQuery. Этот путь не является идеальным способом «сделать кнопку похожей на нажатие». OP может по-прежнему использовать свое решение jQuery, но CSS - «правильный» способ сделать это. Этот ответ не является комментарием, даже если он не заканчивается принятым ответом. pseudosavant
Вопрос озаглавлен «Использование события mousedown на мобильном телефоне без jQuery mobile?». Вариант использования swap-images можно считать упрощенным примером приложения. Если основная часть вопроса кажется несовместимой с его заголовком, то комментарий - это то место, где просят разъяснить ФП. Если вопрос свидетельствует о неправильной мотивации желания сделать то, что задает вопрос, то это место, чтобы предложить это ИМХО. Вы можете опубликовать это как ответ, но я считаю, что это плохой ответ на вопрос, и поэтому я отклонил его (и, кстати, объяснил только потому, что меня спросили). matteo
Это не имеет никакого отношения к тому, является ли он принятым (на самом деле я тоже не считаю принятый ответ очень хорошим, но он действительно решает вопрос, и я проголосовал за него только после того, как он был отредактирован, чтобы включить некоторые из них). более подробно, потому что я благодарен за помощь, которую он предоставляет). И нет, я не опускаю вниз каждый ответ, который не является точным решением, я делаю это только в том случае, если я считаю, что это плохой ответ или ответ, который должен быть комментарием, а не ответом. Мне особенно не нравятся ответы типа «что вы спрашиваете не то, что вы должны делать». Конечно, это только мое мнение и мой голо matteo
55

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 вы получаете интересную информацию, например, сколько касаний происходит одновременно, чтобы вы могли определить, выполняет ли пользователь прокрутку или пытается увеличить масштаб.

ОБНОВИТ

С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;

    ...
})...

ОБНОВИТ

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

//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 события в быстрой последовательности с инструментами разработчика, но я не уверен насчет реального случая использования здесь.

@ matteo Это хороший инструмент, который сделали ребята из jQuery Mobile. Похоже, загрузка только событий vmouse из jQuery Mobile имеет тот же размер файла, что и Modernizr. Jasper
@ matteo В моем @ есть примОбновит. Jasper
Отлично, отлично работает, спасибо. Esaevian
Большое спасибо. Тем временем я узнал, что можно загрузить пользовательскую сборку jquerymobile по адресу Jquerymobile.com / скачать-строитель и включайте только те модули, которые вам нужны, в данном случае это Virtual Mouse, которая, кстати, выглядит довольно много кода (но она также включает и vmousemove). Все равно придется попробовать, хотя matteo
Да, но помимо размера файла, я думаю, у них мало общего. Модуль vmouse в Jquery mobile, похоже, позаботится о многих вещах, чтобы сохранить событие виртуальной мыши как можно более полной и прозрачной заменой событий мыши, что, как я думаю, не делает модернизатор (кроме функции обнаружения). поддержка); Также модернизатор, скорее всего, делает много вещей, которые не связаны с тем, чего явно нет в vmouse jquerymobile. Кстати, я только что попробовал, и это работает. matteo
4

vmouseup, vmousedown, vmousemove, vclick и т. д. функциональность jQueryMobile без получения всего остального (и особенно побочных эффектов) jquerymobile (т. е. улучшения, дополнительных CSS и т. п.)

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

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

Вставьте этот скрипт в заголовок вашего 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, которая создает ярлыки с тем же именем, что и события, находится в каком-то другом модуле. Может быть, можно выяснить, какой это модуль и включить его в загрузку, но я думаю, что это заставит вас включить другие нежелательные зависимости.

vmouse события - это пользовательские события, а не методы, поэтому вам необходимо связать.on() отстегнуть.off() их. Omar
Отлично, прекрасно работает и не заставляет меня использовать jQuery UI или полную библиотеку jQuery Mobile. PaulBGD
Perfect, именно то, что я хотел, мне не нужен мобильный CSS Jquery или другие вещи, и это сообщение загрузки, которое он отображает, ухудшалось. большое спасибо =) Partack

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