Click events not working properly on touch screen devices

[vhopinto86]

• Electron version: 1.6.0
• Operating system: Windows 7, 8 and 10

Hello,

I have a web application that in some scenarios needs to send and receive data to user peripherals through serial port.

For this scenario i created an Electron application that hosts my web application and does the communication between the peripherals and the web app.

Everything works great except on touch screen devices in which the mouse events are not working properly when i tap the screen.

Expected behavior

All click events should work on a touch screen running the web app throught Electron. Everything works using a regular browser.

Actual behavior

When i launch my web application through Electron, a sign in page is shown and the touch screen works properly here.

After signing in, the web app redirects to another page and the touch screen has a strange behavior, the touchstart/touchend events are detected, the click/mousedown/mouseup events are not.

After tapping the screen multiples times, all mouse events start to work again until i navigate to another page. Then the same thing happens again.

How to reproduce

Get the project at https://github.com/electron/electron-quick-start then change the start page to mainWindow.loadURL('https://github.com').

Run the app, go to Sign In page and enter your credentials.

The touch screen stops working after you sign in. If you don't have a touch screen you can use Microsoft Windows Simulator to simulate touch events.

What was tried

After several days searching for a solution, i already tried:

• several touch screen related command line switches like app.commandLine.appendSwitch('touch-events', 'enabled');
• control the navigation between pages of my web application on the Electron side, using mainWindow.loadURL() or creating new instances of BrowserWindow (both options work properly using a mouse)
• disabling node integration

Can someone help me with this?

Thank you

[MarshallOfSound]

@vhopinto86 Do you happen to know if this issue occurs on the latest stable release, 1.4.15?

[vhopinto86]

@MarshallOfSound I don't know, but i will try now.

[vhopinto86]

@MarshallOfSound I just tried and this issue also occurs on the last stable release.

[TimvdEijnden]

We've also have this issue with a webview containing a flash element, also in 1.4.15 & 1.6beta

[KagamiChan]

@TimvdEijnden not sure if your issue is the same as above, but here's a workaround we're using for a webview flash element not responding to touch events:

// Workaround for touch screen
let transformedToMouseEvent = false, isMoved = false
const webContents = remote.getCurrentWebContents()
window.addEventListener('touchend', (e) => {
  transformedToMouseEvent = false
  setTimeout(() => {
    if (!transformedToMouseEvent) {
      console.warn("Blurring focusing element")
      document.activeElement.blur()
      e.target.focus()
      if (!isMoved) {
        const x = Math.round(e.changedTouches[0].clientX),
          y = Math.round(e.changedTouches[0].clientY)
        webContents.sendInputEvent({
          type: 'mouseMove',
          x: x,
          y: y,
        })
        webContents.sendInputEvent({
          type: 'mouseDown',
          x: x,
          y: y,
          button: 'left',
          clickCount: 1,
        })
        webContents.sendInputEvent({
          type: 'mouseUp',
          x: x,
          y: y,
          button: 'left',
          clickCount: 1,
        })
      }
    }
  }, 300)
})
window.addEventListener('touchstart', (e) => {
  isMoved = false
})
window.addEventListener('touchmove', (e) => {
  isMoved = true
})
window.addEventListener('mouseup', (e) => {
  transformedToMouseEvent = true
})

it will "translate" touch events into input ones, and will however cause inifinit loops when using simulated touch

[vhopinto86]

The code that @KagamiChan posted doesn't work in my case.

[teameh]

We're facing the same issue, it's the last blocking issue before we can release the app we've migrated to electron.

In our case, we've got a webview in the main webview. After a sign out users are not able to interact with the login form any more. Inspecting the executed javscript with a timeline shows no activity at all. The touches are being registered, but the event handlers on the form elements are not being called.

[kevinsawicki]

Run the app, go to Sign In page and enter your credentials. The touch screen stops working after you sign in.

I can reproduce this on the Windows Simulator inside a Parallels Window 10 VM. @vhopinto86 are you seeing this issue only in the simulator or on an actual device as well?

[vhopinto86]

@kevinsawicki yes, i'm getting this issue on actual devices as well, a touch screen pc and a tablet.

[Matt3o12]

I also get this issue on a 34 inch touchscreen board after a few minutes (some webpages seem to provoke it) on windows 10. I load external addresses. The mouse and keyboard still work find as well as. I can also use the touchscreen for developer tools. The only way to fix this seems to restart the electron app.

Are there any workarounds for this issue? Or are there any version where it is known to work?

[groundwater]

I have not been able to reproduce this yet on a Windows 10 Surface Pro 4.

I took a quick look at chromium bugs here https://bugs.chromium.org but didn't see anything jump out.

I'll see if we can bring in some more windows expertise here. In the mean time, if anyone can narrow down the cause that would help greatly!

[Matt3o12]

I have found a workaround for this bug:

There seems to be an issue with touch events. Sometimes they seem to get disabled for no apparent reason (maybe there is a bug in the driver or a bug in electron for some drivers). You can observe this behavior by listening to the events (touchend and mousedown). Normally, the touchend event is fired followed by a mousedown event. When this bug occurs, only the touchend event is fired (I have also listened to all other mouse and touchscreen related events -- the touch is not cancelled and no mouse event is fired).

A workaround is to always enabled touch events (the default behavior is automatic). Add this line to your main.js file (Source):

app.commandLine.appendSwitch('touch-events', 'enabled');

Possible values are: automatic (default), enabled (forces touch events), disabled (no touch events -- the same behavior as described by this bug report).

[vhopinto86]

@Matt3o12 Unfortunately, as i said in the first post, that command line switch does not resolve this issue in my case, although it might be the solution for other people.

[brendanadnerb]

I am having a similar issue - app.commandLine.appendSwitch('touch-events', 'enabled'); does not solve it. As @Matt3o12 said, some webpages seem to provoke it, it's hard to say how. Touch events stop working or become very slow to respond. We are building for linux and windows, and it happens on both. I've found that reverting to electron 0.36.11 makes it go away - not sure yet at which version the problem starts.

[mvladic]

I am having the same issue (I tested with Electron 1.4.15 and 1.6.3.)! It works in Chrome perfectly.

[jschlemm]

@I am also having the same issue on the latest electron. The issue disappears when using 0.36.11 as @brendanadnerb suggested. 0.36.12 also works. The issue reappears with 0.37.0

[antoinebigard]

I am also having the same issue.

app.commandLine.appendSwitch('touch-events', 'enabled'); Doesn't solve it.

I can't downgrade my electron version because of some API methods I'm using.

[asoap]

I am also having a very similar issue. Our problem has been determined to be a touch-event issue. We have to turn on that switch in order for our touch screen to work.

The issue however is that we have a flash game loaded in a webview. If for example you touch the flash game 5 times. You then have to touch outside of the webview 6 times in order for a click event to fire. It's like you have to "undo" the touch event. We've boiled our flash down to a very simple flash file. If a mouse is connected to the machine, this issue doesn't happen.

Also once this 5/6 or 11/12 (however times you tap) is completed our problem goes away. This might be one of the strangest issues I've ever had to deal with.

Edit: I'm using chormium 56.0.2924.87 and electron 1.6.2

[krokofant]

So what should we do from here? Trying to reproduce it in chromium and submit a bug upstream? What more information do we need?

[krokofant]

I've looked at a touch screen that I've deployed an electron application to. It detects touch-events and displays different things in a webview depending on the button clicked.

Now, while looking in the console I pressed buttons on the application that appeared frozen. It took ~15 seconds for the events to register (touch-start and touch-end) and the console showed that the application started changing the webview, yet nothing happened on the screen.

I've tried to work around this before by scheduling a restart of the application and this is one time when I caught the screen in a frozen state. Not sure to blame the touch screen or electron. If anyone knows what logging information would more closely diagnose this please do tell.

[kaktuspalme]

I have exactly the same Problem. It only happens when a website inside a webview does a "HTTP 301 Moved Permanently" redirect. I set up a build system and compiled electron. The error happens after commit 6aec1e6 -> with the update to chrome49. Before everything works fine. I didn't have the time yet to look further.

[scrnet]

any news ? We are having this issue with latest version!

[chlk1234]

We have the same problem. We created a electron application on Windows 10 with touch screen. If we use the mouse, everything is fine, but the touch doesn't work. We detected the touch event when touch the screen, but did not detect the click event. But using chrome directly work fine. We've almost tried all the electron versions after 1.2.7, and did not solve it .

[bourgondien]

I ran into the same problem with Electron in combination with a touchscreen. After a while (seemingly random) the screen will become unresponsive. Touchend is still detected by the touchscreen, but click en mouseup are not. They are however detected when using the mouse.

A strange thing I found is that the screen does become responsive again when I am in developer tools and:

• select another tab there
• resize the developer pane
• clear the log console

I do not know how this is related, but maybe it does ring a bell for someone. Does the screen re-render at those moments?

[bourgondien]

In addition to my previous comment I found that it seems the (multi-)touchscreen is falsely registering multi-touch events: the event.touches array becomes populated with ghost touch points and touchEnd will not clear the array. This is when using the screen with just one finger.

The number of touch points in the touches array will go up after a while, becoming 7 or more, all the time just using one finger to interact.

I believe this is the reason the click event or the mouse-up never fires.

I am testing with a capacitive multi-touch monitor from IIyama.

Tips on how to disable multi-touch (we don't need it in this case) are appreciated.

[mkonecny]

I believe we had this problem in Windows 10, and we were able to temporarily address it by clearing the Electron cache directory

c:\Users\<username>\AppData\Roaming\<electron-appname>

And deleting all files under

c:\Users\<username>\AppData\Local\Temp

Note that AppData is a hidden directory, so you need to enable seeing hidden files/folders first.

[riebschlager]

I'm having this identical issue. None of the solutions in this thread have worked for me.

Is there a post v1.0 version that still works?

[bente]

I have resorted to checking the event.touches array 20 secs after the last user interaction. It happens that the array then is still not 0 (which it should). If that is the case I do a hide() - show() of the electron application (it is hardly visible) and that seems to solve the problem in my case.

[riebschlager]

Hey @bente, are you performing this hide/show in an event callback? Like touchend?

[bourgondien]

Hi @riebschlager , See attached file. I am saving the number of touches in touchend, and then check them when the user goes Idle (I am using Idle.js for that). When they are not 0 I do a hide()/show() of the current window. Seems to be working.

interaction-monitor-example.txt