Right-click, copy link address

I find clicking a mailto: link to be very frustrating. If your experience is anything like mine, clicking these links opens Mail.app (which you never use and might not even have an account set up in), creates a new message, and leaves an empty draft behind when you quit the app. Bonus shit points if the link is labelled ‘Contact’ or something equally inconspicuous that I would expect to bring me to a new page.

Animated GIF of dropdown menu labelled Email with options for Send Email and Copy Address
Footer links as they behave on this site today

I’ve tried to prevent this frustration for readers of my site by having the email link pop up a couple of options, the closest being ‘Copy address’. (The RSS link also offers shortcuts to common actions.)

Is the behaviour what you would expect given the icon? Maybe I’m trying to be too clever — should I leave the link alone and let people right-click as they’ve become used to? Send me a tweet (or use the Email menu!) if you have any feedback.


After some feedback from Matt Vagni, I switched the Email and RSS <button> elements out for regular <a> tags with role="button" on them. I then added event.preventDefault(); on the click handler to disable the links. A left-click still triggers my menu but this change preserves the browser’s right-click menu for people who might be used to doing that with email links.

Matt was concerned with accessibility; thanks to adding with role="button" to the links, screen readers treat them just like normal buttons. And if JavaScript fails to download or gets blocked, since it's being used for both event.preventDefault(); and the dropdown behaviour, both instances gracefully degrade to normal links.