Pixi.js: touch event not fired from pixi

[pavan4]

I am raising a touch event like this :

var type = 'end'; // or move, end
var event = document.createEvent('TouchEvent');
event.initTouchEvent();
event.initEvent('touch' + type, true, true); 
var point = {x: 10, y: 10 };
event.touches = [{identifier: Date.now() + i,
                            force: 1,
                            pageX: point.x,
                            pageY: point.y,
                            screenX: point.x,
                            screenY: point.y,
                            clientX: point.x,
                            clientY: point.y}];
dispatchEvent(event);

I am able to catch it using

window.addEventListener("touchend", endHandler, false);
function endHandler(event) {
  console.log(event);
}

But the event in pixi doesn't fire when I do this

button.touchend = function(data){
    console.log('event fired from pixi');
}

What should I replace to get the event fired from pixi?

[englercj]

You are firing the event on window, but we are listening to events on the render element (the canvas). Dispatch the event on that element.

[pavan4]

is there any way I can dispatch it on the window and catch the element on top of it ?

[englercj]

Events bubble up the DOM, and the window is at the top. So that doesn't work. But if you dispatch the event on the canvas, it will bubble up to the window. Why do you have to dispatch on window?

[pavan4]

I am dispatching the event from js and I do not have any requirement to dispatch on window but I do not know how to dispatch it on canvas. Any example to raise a touch event will be helpful. (Sorry if this is a noob question)

I even tried this with no luck:

var el = document.elementFromPoint(x,y);
el.dispatchEvent(event);

[englercj]

renderer.view.dispatchEvent(event)

Should work fine, there is only one canvas that things can happen on right?

[pavan4]

It didn't work. The event is firing and I can catch it in the listener but the element doesn't react to the event. It worked only on safari on iOS with

x = 175;y=75;
var touch = document.createTouch(window, window, 1, x, y, x, y);
var touches = document.createTouchList(touch);
var targetTouches = document.createTouchList(touch);
var changedTouches = document.createTouchList(touch);
var event = document.createEvent("TouchEvent");
event.initTouchEvent('touchstart', true, true, window, null, x, y, x, y, false, false, false, false, touches, targetTouches, changedTouches, 1, 0);
renderer.view.dispatchEvent(event);

This however doesn't work on Android (chrome) no idea why :/

But unfortunately the createTouch and createTouchList are not available for desktop even in mobile emulation enabled and the other method mentioned above doesn't fire the reaction in PIXI on desktop ... Any workarounds?

[GoodBoyDigital]

Hi there! looks like you may need to turn off autoPreventDefault

renderer..plugins.interaction.autoPreventDefault = false

this will let the event bubble up out of pixi.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.