No click event if mouse moves a few pixels?

Design help Custom code
1

Hi all! Glad to be here; and for the first time.

The two requested links for my project are:
[1]: https://desk2.webflow.io
[2]: https://preview.webflow.com/preview/desk2?utm_medium=preview_link&utm_source=designer&utm_content=desk2&preview=f53ead663a4c259269843da258eed141&mode=preview

This is my first Webflow learning project, I’m creating a graphical “Pizza Builder”. The one problem I’m having occurs when clicking topping to add them. If the mouse moves only a few pixels during the click, the picture does not receive the click event! (At least, no click-event shows in the Chrome console where I expect it.) My guess is that the click is being turned into a drag event.

This is an example of the JavaScript I’m using that responds to the click events, located “Before tag”:

$( ‘.banana-s’ ).click(function() {
$(‘.banana-s’ ).addClass(‘add’);
$(‘.banana-pepper’ ).addClass(‘fade’);
});
$( “.banana-b” ).click(function() {
$(‘.banana-s’).removeClass(‘add’);
$(‘.banana-pepper’ ).removeClass(‘fade’);
});

Unless Webflow provides a more direct method, what I need is a way for JavaScript to respond when the mouse is clicked down, and then up again anywhere on the same image, even if the mouse has moved over a number of pixels in the process.

Tommy Paul

2

I’m not really seeing this problem in Chrome? The click goes through just fine even if I’m moving the cursor around.

3

Thanks for the reply, Fonsume. It’s good that some others (if not most others) don’t experience the problem. So now I need to look for “Why here and not there?”

UPDATE: I’m developing on Windows, so just tried the link I sent you on an Apple. The result was the same problem. At first I thought it was working, but then I realized at then end of moving I’d let the mouse button up and clicked down a second time (and it worked because the mouse wasn’t moving during the second click down and up). Are you sure this didn’t happen to you too?