Слияние кода завершено, страница обновится автоматически
jQuery.event.ue
Используйте этот плагин unified event для приложений, которые легко и без проблем поддерживают мобильные (сенсорные) и настольные (мышь) среды.
Плагин распознаёт движения мыши, клавиатуры и касания, имеющие одинаковое намерение, и публикует для них унифицированные события. Например, намерение длительного нажатия выражается с помощью мыши нажатием и удержанием левой кнопки мыши более полсекунды без существенного перемещения мыши. То же самое намерение на сенсорном устройстве выражается путём размещения пальца на экране более полсекунды без его существенного перемещения. Этот плагин распознаёт оба движения как имеющие одинаковое намерение и публикует одно событие uheld для любого из них.
Вот полный список намерений, поддерживаемых этим плагином unified event:
utap — щелчок мышью (мышь)/касание пальцем (сенсорный экран);uheld — длительное нажатие мышью/нажатие и удержание пальцем;udrag — щелчок и перетаскивание мышью/свайп пальцем;uhelddrag — долгое нажатие и перетаскивание мышью/нажатие, удержание и перетаскивание пальцем;zoom — перетаскивание мыши по оси Y с одновременным нажатием клавиши Shift/щипок двумя пальцами.Этот плагин используется во множестве коммерческих SPA и упоминается в бестселлере «Одностраничные веб-приложения — JavaScript от начала до конца» [1], также [доступном на Amazon][2].
Пожалуйста, посмотрите файл ue-test.html для демонстрации различных намерений. Ожидаемое поведение выражено в BR углу плиток. Если вы видите какое-либо неожиданное поведение при тестировании движений на вашем устройстве, пожалуйста, создайте отчёт об ошибке, чтобы мы могли это исправить!
Этот плагин работает с jQuery 1.7.0+ и был протестирован на большинстве версий jQuery до 3.0.0. Он работает с последними версиями популярных браузеров: Chrome 15+, Firefox 23+, Safari 5+ и IE 9+. Для IE9 требуются настройки edge:
<head><meta http-equiv="X-UA-Compatible" content="IE=edge" />
....
// bind to a mouse click or tap event
$( '#utap' ) .on( 'utap', onTap );
// bind to a long-press event
$( '#uheld' ).on( 'uheld', onHeld );
// bind to zoom events
$( '#uzoom' )
.bind( 'uzoomstart', onZoomstart )
.bind( 'uzoommove', onZoommove )
.bind( 'uzoomend', onZoomend )
;
// bind to drag events
$( '#udrag' )
.bind( 'udragstart', onDragstart )
.bind( 'udragmove', onDragmove )
.bind( 'udragend', onDragend )
;
// bind to hold-drag events
$('#uhelddrag')
.bind('uheldstart', onDragstart )
.bind('uheldmove', onDragmove )
.bind('uheldend', onDragend )
;
Смотрите файл ue-test.html, чтобы увидеть пример использования объекта события.
Намерение клика приводит к событию utap.
Вы можете настроить допуски касания, перетаскивания и долгого нажатия в defaultOptMap в верхней части библиотеки. В будущем в API появится метод для изменения этих значений.
Намерение долгого нажатия приводит к событию uheld.
Намерение перетаскивания приводит к одному событию udragstart, одному или нескольким событиям udragmove и окончательному событию udragend.
Порядок событий следующий:
udragstart — срабатывает в начале перетаскивания;udragmove — срабатывает при каждом перемещении указателя;udragend — срабатывает по окончании перетаскивания.Намерение удерживаемого перетаскивания приводит к одному событию uheldstart, одному или нескольким событиям uheldmove и последнему событию uheldend.
LMB down + удержание — перемещение мыши — LMB up, где время нажатия кнопки мыши превышает толерантность удерживания, а мышь остаётся в пределах толерантности перетаскивания, после чего происходит перемещение, превышающее толерантность перетаскивания.touchstart + удержание — движение — end, где время касания превышает толерантность удержания, а сенсорное взаимодействие остаётся в пределах толерантности перетаскивания, после чего местоположение касания оказывается больше толерантности перетаскивания.Порядок событий:
uheldstart — срабатывает в начале удерживаемого перетаскивания;uheldmove — срабатывает каждый раз при перемещении указателя;uheldend — срабатывает по завершении удерживаемого перетаскивания.Намерение масштабирования приводит к единственному событию uzoomstart, одному или более событиям uzoommove и финальному событию uzzoomend.
shift + LMB вниз — перемещение мыши — LMB вверх, где время нажатия клавиши мыши превышает толерантность касания, а перемещение больше толерантности перетаскивания.Порядок событий:
uzoomstart — срабатывает в начале масштабирования;uzoommove — срабатывает при изменении масштаба;uzoomend — срабатывает после завершения масштабирования.Объект события для всех событий ue включает следующие атрибуты в дополнение к тем, которые уже предоставлены jQuery:
var attr_list = [
event.px_start_x, // X-позиция в начале движения
event.px_start_y, // Y-ibid
event.px_current_x, // X-позиция, текущая
event.px_current_y, // Y-ibid
event.px_end_x, // X-позиция для x в конце движения
event.px_end_y, // Y-ibid
event.px_delta_zoom, // Дельта масштабирования с момента последнего события движения
event.px_delta_x, // X-ibid
event.px_delta_y, // Y-ibid
event.px_tdelta_x, // X-дельта с начала движения
event.px_tdelta_y, // Y-ibid
event.orig_target, // Элемент под курсором в начале движения
event.elem_bound, // Элемент, к которому привязано событие
event.elem_target, // Элемент под курсором для *этого* события
event.timeStamp, // Временная метка этого события
event.ms_elapsed, // Истекшее время с начала движения
event.ms_timestart, // Время начала движения
event.ms_timestop, // Время окончания движения
];
Этот код игнорирует плохой ввод и не генерирует исключения. Поскольку реализации JS (наконец) видят улучшенную обработку исключений, ожидайте, что это изменится в версии 2.x.
Полностью поддерживается пространство имён событий jQuery, как показано в этом примере:
$( '#msg' )
.on( 'utap.mytap', onTapMsg )
.on( 'uheld.mytap', onHeldMsg );
$( '#msg' ).unbind( '.mytap' );
Это библиотека, которая стремится быть лучшей в своём классе. Если вы рассматриваете возможность использования SPA-фреймворка, пожалуйста, сначала прочитайте [Вы действительно хотите SPA-фреймворк?][0].
Майкл С. Миковски (mike[dot]mikowski[at]gmail[dotcom])
Двойная лицензия под MIT или GPL версии 2 http://jquery.org/license
Обновлён для игнорирования большинства элементов ввода (input, textarea, select) по умолчанию. См. параметр ignore_select.
console
bind и unbind на on и off
ignore_class на ignore_select
Обновлён ue-test.html для правильной обработки масштабирования.
Функция preventDefault() перестала срабатывать на событиях, не контролируемых плагином.
Никаких изменений кода. Обновлены ключевые слова npm. Исправлены опечатки. Повышен номер версии для представления зрелости и...
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )