lzy100p Posted May 31, 2022 Share Posted May 31, 2022 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 Link to comment Share on other sites More sharing options...
akapowl Posted May 31, 2022 Share Posted May 31, 2022 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 2 Link to comment Share on other sites More sharing options...
mvaneijgen Posted May 31, 2022 Share Posted May 31, 2022 There are also build in event listeners, see the docs See the Pen KKQoxWm?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen 3 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 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 2 Link to comment Share on other sites More sharing options...
akapowl Posted May 31, 2022 Share Posted May 31, 2022 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. 2 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 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 😂 1 Link to comment Share on other sites More sharing options...
akapowl Posted May 31, 2022 Share Posted May 31, 2022 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 2 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 Hahahaha. NEVER EVER EVER 😂 Link to comment Share on other sites More sharing options...
Cassie Posted May 31, 2022 Share Posted May 31, 2022 Interesting that it doesn't work for me in latest chrome on mac. Paging @creativeocean Link to comment Share on other sites More sharing options...
lzy100p Posted May 31, 2022 Author Share Posted May 31, 2022 Thank you! 2 Link to comment Share on other sites More sharing options...
creativeocean Posted July 13, 2022 Share Posted July 13, 2022 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now