<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. */
  • 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

No notes defined.