hammerjs / touchemulator

Emulate touch input on your desktop
http://hammerjs.github.io/touch-emulator
MIT License
385 stars 109 forks source link

Unable to click on inputs to focus #2

Open nicinabox opened 10 years ago

nicinabox commented 10 years ago

Example: http://jsbin.com/vaduzimayo

joefreeman commented 9 years ago

I came across this problem too. I think #4 fixes it.

ezsper commented 9 years ago

The ignoreTags didn't work for me on Chrome, I believe you should consider to wrap the ignoreTags option also on preventMouseEvents function, that did the trick for me. Notice that with the code changes bellow on your script, I don't even need to set ignoreTags, it just works as it is, at least on my needs.

function onMouse(touchType) {
        return function(ev) {
            // prevent mouse events
            if(
              (ev.type === 'mousedown' || ev.type === 'mouseup') &&
              ev.target.tagName !== "INPUT" &&
              ev.target.tagName !== "SELECT" &&
              ev.target.tagName !== "TEXTAREA" &&
              ev.target.tagName !== "BUTTON"
            ) {
              preventMouseEvents(ev);
            }
PvanHengel commented 8 years ago

I have the same issue...

liyikun commented 6 years ago

I have the same issue too!!!!!!!!!...

ghost commented 6 years ago

I'm also having this issue.

ghost commented 5 years ago

I have tested more scenarios and nowadays it's not working properly. Its not catching taps and swipes. Anyone knows if it will have any update?

The best I came was this:

function touchHandler(event) {
    //var touch = event.changedTouches[0];
    var touch = event;
    var eventType = '#';
    if(event.type == 'mousedown') eventType = 'touchstart';
    else if(event.type == 'mousemove') eventType = 'touchmove';
    else if(event.type == 'mouseup') eventType = 'touchend';
    else if(event.type == 'mousecancel') eventType = 'touchcancel';
    //else if(event.type == 'click') eventType = 'touch';
    console.log(eventType);

    const touchObj = new Touch({
        identifier: Date.now(),
        target: touch.target,
        screenX: touch.screenX,
        screenY: touch.screenY,
        clientX: touch.clientX,
        clientY: touch.clientY,
        radiusX: 2.5,
        radiusY: 2.5,
        rotationAngle: 10,
        force: 0.5,
      });

      const touchEvent = new TouchEvent(eventType, {
        cancelable: true,
        bubbles: true,
        touches: [touchObj],
        targetTouches: [],
        changedTouches: [touchObj],
        shiftKey: true,
      });

    touch.target.dispatchEvent(touchEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("mousedown", touchHandler, true);
    document.addEventListener("mousemove", touchHandler, true);
    document.addEventListener("mouseup", touchHandler, true);
    document.addEventListener("mousecancel", touchHandler, true);
    //document.addEventListener("click", touchHandler, true);
}

Greetings.