# Clickable Area

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <div class="demo--accented">
        <clickable-area>
            <h1>Hello</h1>
            <a href="#">Click here!</a>
        </clickable-area>
    </div>

`
`

    <div class="demo--accented">
        <clickable-area>
            <h1>Hello</h1>
            <a href="#">Click here!</a>
        </clickable-area>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      // following advice from https://inclusive-components.design/cards
      export default class ClickableArea extends HTMLElement {
        connectedCallback() {
          if (this.link) {
            this.addEventListener('mousedown', this.handleMousedown.bind(this))
            this.addEventListener('mouseup', this.handleMouseup.bind(this))
            this.style.cursor = 'pointer'
          }
        }

        handleMousedown({ timeStamp }) {
          this.down = timeStamp
        }

        handleMouseup({ timeStamp }) {
          if (timeStamp - this.down < 200) {
            this.link.click()
          }
        }

        get link() {
          return this.querySelector('a')
        }
      }

  `
- URL: /components/raw/clickable-area/clickable-area.js
- Filesystem Path: components/05-atoms/clickable-area/clickable-area.js
- Size: 589 Bytes

- Content:
  `

      clickable-area {
        display: block;
      }

  `
- URL: /components/raw/clickable-area/clickable-area.scss
- Filesystem Path: components/05-atoms/clickable-area/clickable-area.scss
- Size: 37 Bytes

- Handle: @clickable-area
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/05-atoms/clickable-area/clickable-area.html

No notes defined.