The object in Draggable does not listen to the mousedown event, but the click and touch events are fine

[lzy100p]

The object in Draggable does not listen to the mousedown event, but the click and touch events are fine。

How to listen to the mousedown event？

Thanks

See the Pen mdXxjao by lzy100p (@lzy100p) on CodePen

[akapowl]

Hello @lzy100p

 

This here from the docs could help:

 

allowEventDefault:  Boolean - If true, preventDefault() won't be called on the original mouse/pointer/touch event. This can be useful if you want to permit the default behavior like touch-scrolling. Typically, however, it's best to let Draggable call preventDefault() on the events in order to deliver the best usability with dragging.

 

See the Pen YzeaOPg by akapowl (@akapowl) on CodePen

[mvaneijgen]

There are also build in event listeners, see the docs

 

See the Pen KKQoxWm?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[Cassie]

Just jumping in with a fork of @akapowl's pen - he's correct but you hadn't defined the d2 variable anywhere so nothing was firing.

See the Pen qBxoJKN?editors=1011 by GreenSock (@GreenSock) on CodePen

[akapowl]

19 minutes ago, Cassie said:

Just jumping in with a fork of @akapowl's pen - he's correct but you hadn't defined the d2 variable anywhere so nothing was firing.

 

Interesting. It does fire for me in Chrome on Windows.

 

Actually I remember Tom Miller and Alex Trost discussing this in the recent TrostCodes live-stream where both built a 3D-ScrollTrigger image-gallery - I think I saw you in the chat there, too @Cassie - but I also think they talked about it rather close to the beginning, so probably before you entered the chat  

 

When you do not define the variable in JS, some browsers will automatically target IDs of HTML elements with that respective name - apparently some browsers do not do that. So definitely defining the variable to target the element in JS will be more secure.

[Cassie]

Oh weird. I never knew not defining variables was a thing. TIL. Sounds like a terrible plan though. If I forget to define something I don't want the browser to just assume what I'm looking for 😂

[akapowl]

Yes, I'm totally on board with that - especially since it does not appear to be consistant across browsers.

 

Here is where they had mentioned it in that live-stream

 

https://www.twitch.tv/videos/1486428887?t=22m18s

 

 

 

And here is another reference - I love the 'When should you use this?' part in there - TLDR: "Never, ever, ever, ever in your actual code base." 😅

 

https://gomakethings.com/your-browser-automatically-creates-javascript-variables-for-elements-with-an-id/

 

https://dev.to/buntine/dom-elements-with-ids-are-global-variables

 

[Cassie]

Hahahaha. NEVER EVER EVER 😂

[Cassie]

Interesting that it doesn't work for me in latest chrome on mac. Paging @creativeocean 

[lzy100p]

Thank you！

[creativeocean]

Wow I'm late -just seeing this thread now

I 100% agree, one shouldn't rely on IDs to become global vars in any actual project. That said, it's a cheap shortcut for making concise demos.

 

If you really wanted that behavior (I've worked for a few agencies that do this), you could loop over all the elements with an ID and make them global vars, like so:
 

[].forEach.call(document.querySelectorAll('*'), function(el){ if (el.id) window[el.id] = el; }); // IDs to vars

However, for future readers/editors of the code, it's kind of nice to see clearer variable definitions...sort of an intro to the cast of characters.