Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

children click event won't trigger on iOS 11 device #812

Open
littlee opened this issue Apr 23, 2020 · 3 comments
Open

children click event won't trigger on iOS 11 device #812

littlee opened this issue Apr 23, 2020 · 3 comments

Comments

@littlee
Copy link

littlee commented Apr 23, 2020

demo code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .gg {
        width: 300px;
        height: 300px;
        border: 1px solid blue;
        touch-action: none;
      }
    </style>
  </head>
  <body>
    <div class="gg">
      <button type="button" id="btn" onclick="console.log('click')">click</button>
    </div>
    <script src="./interact.min.js"></script>
    <script>
      interact('.gg').draggable({
        listeners: {
          move: dragMoveListener,
        },
      });

      function dragMoveListener(event) {
        var target = event.target;
        // keep the dragged position in the data-x/data-y attributes
        var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
        var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

        // translate the element
        target.style.webkitTransform = target.style.transform =
          'translate(' + x + 'px, ' + y + 'px)';

        // update the posiion attributes
        target.setAttribute('data-x', x);
        target.setAttribute('data-y', y);
      }
    </script>
  </body>
</html>

Expected behavior

click button will print log

Actual behavior

click button will not print log, I have to change onclick to ontouchstart temporarily

System configuration

interact.js version: 1.9.0
Browser name and version: iOS 11.4 safari
Operating System: iOS 11.4
@taye
Copy link
Owner

taye commented Apr 23, 2020

You can use interact('#btn').on('tap', console.log) instead. The library prevents the default behaviour of touchstart events to avoid panning, but that also disables click events. The custom tap event provides a more consistent, cross-platform alternative.

@littlee
Copy link
Author

littlee commented Apr 24, 2020

but that also disables click events

in my test, the children elements inside the draggable target can trigger click event normally on iOS 13. It looks more like a compatibility issue.

I actually use this lib with react, change all the children's onClick binding to interact tap event would be strenuous.

I hope there would be a better way to reserve normal click event of children element.

@stale stale bot added the wontfix label May 8, 2020
@stale stale bot closed this as completed May 15, 2020
Repository owner deleted a comment from stale bot May 27, 2020
@taye
Copy link
Owner

taye commented May 27, 2020

I'll try to take another look at this soon.

@taye taye reopened this May 27, 2020
@stale stale bot removed the wontfix label May 27, 2020
@stale stale bot added the wontfix label Jun 10, 2020
@stale stale bot closed this as completed Jun 18, 2020
Repository owner deleted a comment from stale bot Jun 23, 2020
@taye taye reopened this Jun 23, 2020
@stale stale bot removed the wontfix label Jun 23, 2020
@taye taye mentioned this issue Sep 22, 2020
Open
@DAHUIAAAAA DAHUIAAAAA mentioned this issue Dec 3, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@taye @littlee