Ручное срабатывание сенсорного события

Я искал последние 30 минут, но не нашел решения.

Я хочу вызвать событие touchstart для элемента.

Это событие touchstart:

var e = document.createEvent('MouseEvent');

e.initMouseEvent("touchstart", true, true, window, 1, screenX, screenY, clientX, clientY,
    ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);

target.dispatchEvent(e);

Обратите внимание, что переменные определяются моей функцией

Но проблема с этим. Объект event не имеет свойства touches. Так что-то вроде этого не будет работать:

var touch = e.touches[0];

Есть ли способ запустить событие touchstart вручную (он должен работать на Android >= 4.0 и Chrome с сенсорным экраном [DevTools])?

Обратите внимание, что я НЕ хочу использовать какую-либо инфраструктуру, например jQuery. С jQuery легко создать элемент touchevent для элемента;)

Ответы

Ответ 1

Согласно W3C

var e = document.createEvent('TouchEvent');

Затем также измените

e.initMouseEvent();

to

e.initTouchEvent();

Как вы создали событие touchstart.

Ссылка W3C говорит:

Некоторые пользовательские агенты реализуют метод initTouchEvent как часть интерфейса TouchEvent. Когда этот метод доступен, скрипты могут использовать его для инициализации свойств объекта TouchEvent, включая его свойства TouchList (которые могут быть инициализированы значениями, возвращаемыми из createTouchList). Метод initTouchEvent еще не стандартизирован, но может выглядеть в некоторой форме в будущей спецификации.

Поэтому вам, возможно, придется прибегнуть к e.initUIEvent('touchstart', true, true);
Кроме того, в официальной спецификации также указывается, что объект TouchList не является обязательным и может быть создан вручную с помощью метода createTouchList. Чтобы добавить прикосновение к этому списку, вам нужно вызвать метод createTouch, где вы пройдете все координаты и такие:

6.1 Methods

#createTouch
Creates a Touch object with the specified attributes.
Parameter | Type        | Nullable | Optional | Description
view      | WindowProxy |   ✘      |    ✘     |
target    | EventTarget |   ✘      |    ✘     |
identifier| long        |   ✘      |    ✘     |
pageX     | long        |   ✘      |    ✘     |
pageY     | long        |   ✘      |    ✘     |
screenX   | long        |   ✘      |    ✘     |
screenY   | long        |   ✘      |    ✘     |
Return type: Touch

#createTouchList
Creates a TouchList object consisting of zero or more Touch objects. Calling this method with no arguments creates a TouchList with no objects in it and length 0 (zero).

Parameter | Type  | Nullable | Optional | Description
touches   | Touch |     ✘    |    ✔     |
Return type: TouchList

Если это не сработает, вы можете попробовать следующее:

var e = document.createEvent('UIEvent');
e.initUIEvent();

должен работать, он имеет больше смысла, чем createEvent('MouseEvent') во всяком случае...
Но для целей тестирования почему бы не открыть консоль хром и не проверить Emulate touch events, а также переопределить пользовательский агент на Android 4. (Ctrl + Shift + j > щелкнуть правый правый угол шестерни и выбрать Переопределения, там вы найдете все настройки, которые вам нужны)

Поскольку сенсорным событиям предстоит пройти долгий путь, все еще с точки зрения их стандартизации, оказывается, что свойство touches не является RO (пока?), поэтому вы можете использовать это быстрое исправление (которое OP найден и используется с желаемым результатом):

var e = document.createEvent('TouchEvent');
e.touches = [{pageX: pageX, pageY: pageY}];

Что, я думаю (я не могу поверить, если это не так) быстрее, чем:

e.touches = e.createTouchList(
    e.createTouch(window, target, 0, pageX, pageY, screenX, screenY)
);

Ответ 2

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

var e = new Event('touchstart');
target.dispatchEvent(e);

Что это. Не может быть проще.

Ответ 3

Я пришел с этим решением (родной JavaScript), работает для меня

var el = document.getElementById('myDivId');
// desktop
el.click();

// mobile
if (window.matchMedia("(max-width: 768px)").matches) {
        // createEvent(), event.initEvent() are Depricated see Ref: [enter link description here][1]
        // var event = document.createEvent("Event"); 
        // event.initEvent("touchstart", false, true);
        // event.initEvent("touchend", false, true);
        // So the solution is:
        var event1 = new Event('touchstart');
        var event2 = new Event('touchend'); 
        el.dispatchEvent(event1); 
        el.dispatchEvent(event2);
  }

Ответ 4

Мы можем вызвать следующее:

$playBtn.bind((is_touch_device) ? 'touchstart' : 'click', playfunction);