Clicking on source or target elements on mobile devices is not working

[hellovietduc]

When using the latest jsplumb version, clicking on a source or a target element doesn't work. This only occurs on mobile devices (does not happen when resizing the browser window on desktop to a small size). I tried attaching a global click listener to the document object and log the event.target but the listener doesn't trigger whenever I click on the elements. All click listeners in child elements also don't work.

---

Summary: Existing click event is not fired from node element and its child elements
Affected version: 5.12.x
Affected devices: iOS and Android

[sporritt]

how are you binding to the click event?

[hellovietduc]

We're using Vue.js. The structure is something like this:

<div id="post-123">
  ...
  <button @click="handleClick">Like</button>
  ...
</div>

<div id="post-224">
  ...
  <button @click="handleClick">Like</button>
  ...
</div>

Then in a mixin, we connect the two elements together.

const fromElement = document.getElementById('post-123')
const toElement = document.getElementById('post-224')

jsPlumb.connect({
  source: fromElement,
  target: toElement,
  ...
})

When on a browser on a mobile device, the handleClick function is not called anymore because click is never emitted.

[hellovietduc]

I can actually reproduce this by going to https://jsplumbtoolkit.com/community on Xcode Simulator, and then use Safari DevTools to inspect the HTML and attach a listener to one of the node, then click on it. The code is not run. Doing the same thing on desktop, the listener runs.

[sporritt]

have you tested on any browser other than Safari?

[hellovietduc]

Yes. It also happens in Chrome.

[sporritt]

does it happen on this page for you in Chrome?

https://demo.jsplumbtoolkit.com/community/flowchart/

[hellovietduc]

yes it happens. I plugged an Android phone to my laptop and used Chrome Inspect (chrome://inspect/#devices), then I selected the element and attached the listener like below:

$0.addEventListener('click', ()=>{alert('hello')})

The alert never comes.

I also added a global listener

document.addEventListener('click', ()=>{alert('hello')})

and the alert shows when I click everywhere except the node element: