The button event can not be triggered

daybrush / moveable

Moveable! Draggable! Resizable! Scalable! Rotatable! Warpable! Pinchable! Groupable! Snappable!

https://daybrush.com/moveable/

MIT License

10.08k stars 618 forks source link

The button event can not be triggered #543

Closed nzbin closed 2 years ago

nzbin commented 2 years ago

Environments

Framework name: null
Framework version: null
Moveable Component version: 0.26.0
Testable Address(optional): https://codesandbox.io/s/moveable-jpwgh?file=/index.html

Description

When upgrade moveable to latest version (v0.26.0), the button event can not be triggered.

https://codesandbox.io/s/moveable-jpwgh?file=/index.html

daybrush commented 2 years ago

@nzbin

The click event is blocked.

Use moveable's click event instead.

<Moveable onClick={e=>{}}/>

new Moveable.on("click", e => {

});

nzbin commented 2 years ago

I am very confused. I have updated the demo, there has three different button, how can I trigger the different event?

There has many complex scenario that need capture events binding to element in Moveable.

daybrush commented 2 years ago

@nzbin

I will change it so that it does not block the click event in the next version.

nzbin commented 2 years ago

Great, many thanks!

sagrawal31 commented 2 years ago

Well, amazing. Today I was facing the same issue and I was trying to bang my head. Basically, when the draggable = true, I do not get the click event on the element. I hope this issue will solve that.

daybrush commented 2 years ago

@sagrawal31

Test react-moveable@0.30.0-beta.0 (beta)

sagrawal31 commented 2 years ago

Thanks for the test release. I realized later that this issue is for React apps while I'm using vanilla JS in my Angular app.

sagrawal31 commented 2 years ago

Hi, @daybrush. As I have mentioned above, I'm actually facing the same issue with Vanilla JS (using 0.26.0). When the draggable is set to true on an element, any of its child nodes/elements are not receiving the click event.

While this problem does not exist if draggable: false. For example- when I try to click on that image in the screenshot, the click event is not received on the image element, and it only comes to the parent, i.e. selected element.

For now, I have added this hack as a workaround to the problem-

Any thoughts? Maybe instead of fixing at React, some fix is required at the lower level?

daybrush commented 2 years ago

@sagrawal31 @nzbin

moveable 0.27.1
react-moveable 0.30.1
preact-moveable 0.29.1
ngx-moveable 0.23.1
svelte-moveable 0.18.1
lit-moveable 0.4.1
vue-moveable 2.0.0-beta.3
vue3-moveable 0.2.1

moveable's new version is released. Check it again.

sagrawal31 commented 2 years ago

@daybrush, I just tested the release 0.27.1, and the problem is gone 🤩 Thanks a ton!