Skip to content

Instantly share code, notes, and snippets.

@lkopacz
Last active May 15, 2019 17:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lkopacz/68b40e830d758f2cafd185be2ed96111 to your computer and use it in GitHub Desktop.
Save lkopacz/68b40e830d758f2cafd185be2ed96111 to your computer and use it in GitHub Desktop.
Semantic HTML buttons
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<!--This doesn't work when you press Enter and
there's a click event -->
<div id="button-1" role="button" tabindex="0">
Open
</div>
<!--This works when you press Enter and there's
a click event -->
<button id="button-2">
Open
</button>
<script src="script.js"></script>
</body>
</html>
const button1 = document.getElementById('button-1')
const button2 = document.getElementById('button-2')
button1.addEventListener('click', () => alert('clicked!'))
button2.addEventListener('click', () => alert('clicked!'))
@weboverhauls
Copy link

Fake button doesn't fire with spacebar either as a native HTML button does.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment