dvartic
Link/1 action on mousedown instead of click
Would there be interest to implement a link/1 that gives to option to operate on other events?
So I implemented a simple link/1 function that instead of working on click works on mousedown (or whatever you want, based on a hook).
Just took a look at Lieview code, copied the link/1 function, and added a hook onmount that calls click which, based on also Lieview code, already has an event and event checks for if(this.pendingLink === href) {return;} so I don’t need to prevent the next click event after the mouse is lifted. Works really well.
attr :id, :string, required: true
attr :navigate, :string
attr :patch, :string
attr :href, :any
attr :replace, :boolean, default: false
attr :method, :string, default: "get"
attr :csrf_token, :any, default: true
attr :rest, :global, include: ~w(download hreflang referrerpolicy rel target type)
slot :inner_block, required: true
def fast_link(%{navigate: to} = assigns) when is_binary(to) do
~H"""
<a
id={@id}
href={@navigate}
data-phx-link="redirect"
data-phx-link-state={if @replace, do: "replace", else: "push"}
phx-hook="FastLink"
{@rest}
>
<%= render_slot(@inner_block) %>
</a>
"""
end
Repeat the others for push and href.
The hook is just:
export const FastLink = {
mounted() {
const linkEl = this.el;
linkEl.addEventListener("mousedown", (e) => {
e.preventDefault();
e.stopImmediatePropagation();
linkEl.click();
});
},
};
Most Liked
BartOtten
I always like it when people experiment with unofficial solutions. But….
You might want to buy a bit more from people who actually studied usability patterns. For me: If I touch a button and it fires before I lift my finger..I get really irritated. Maybe I want to open the link in another tab (I can’t), select the text (I can’t) and other issues you have probably never thought of as you do not know all use cases. You as developer making the decision if it should be a fast link or a normal one is killing (_blank and _new are considered bad practice too)
There are usability guidelines for a reason; so you don’t have to learn all reasons why we came up with them in the first place.
benwilson512
If you want a link to behave like a link, please don’t do this.
If you want to use a link for other purposes then sure, but please don’t do this to actual hrefs. As others have stated, the loss in consistency, predictability, and accessibility isn’t worth it.
BartOtten
My ‘opinion’ is so strong because I actually studied usability. So I do not guess, I know. And I share that information with you.
Your logic is broken. Pushing things forward might be accomplished by breaking the rules. That does not mean the other way around is also true. I could, for example, break the rules of this forum by using CAPS-LOCK ALL THE TIME. BUT WE BOTH AGREE IT DOES NOT PUSH ANYTHING, EXCEPT THE WRONG BUTTONS (pun intended).
You asked for opinions; you got opinions. Don’t act like all who replied are narrow sighted and suggest they don’t like going forward.
Last Post!
BartOtten
Just to be clear: you did find the information but you were still not convinced? Ah well…you do you as they say 
Popular in Proposals: Ideas
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Supporting innovation across the BEAM ecosystem.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #hex
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"