# Attribute “ontouchstart” not allowed on element “div” at this point.

> Canonical HTML version: https://rocketvalidator.com/html-validation/attribute-ontouchstart-not-allowed-on-element-div-at-this-point
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `ontouchstart` attribute is an inline event handler that some developers use to detect when a user touches an element on a touchscreen device. However, unlike standard event handler attributes such as `onclick`, `onmousedown`, or `onkeydown`, the `ontouchstart` attribute is not defined in the HTML specification. The W3C validator flags it because only attributes explicitly listed in the spec are allowed on a given element.

The `touchstart` event itself is a legitimate event defined in the [Touch Events](https://w3c.github.io/touch-events/) specification — it's the *inline HTML attribute* form (`ontouchstart`) that isn't recognized as a valid attribute by the HTML standard. This distinction is important: you can absolutely listen for `touchstart` events, just not via an inline attribute on an HTML element.

## Why This Is a Problem

- **Standards compliance**: Using non-standard attributes produces invalid HTML, which can cause issues with automated testing, accessibility audits, and content management pipelines that enforce validation.
- **Accessibility**: Relying solely on touch events excludes users who navigate with a keyboard, mouse, or assistive technology. Touch-only handlers can make interactive elements completely inaccessible to non-touch users.
- **Maintainability**: Inline event handlers mix behavior with markup, making code harder to maintain and debug compared to centralized JavaScript event listeners.
- **Browser inconsistencies**: While most mobile browsers support the `touchstart` event, the inline attribute form is not guaranteed to work consistently across all environments.

## How to Fix It

1. **Remove the inline `ontouchstart` attribute** from your HTML element.
2. **Use `addEventListener` in JavaScript** to attach the `touchstart` event listener programmatically.
3. **Consider also handling `click` or `pointerdown`** events so the interaction works for all input types — mouse, keyboard, touch, and stylus. The [Pointer Events](https://www.w3.org/TR/pointerevents3/) API (`pointerdown`, `pointerup`, etc.) is a modern, unified approach that covers mouse, touch, and pen input in a single event model.

## Examples

### ❌ Invalid: Inline `ontouchstart` attribute

```html
<div ontouchstart="handleTouch()">Tap me</div>
```

This triggers the validation error because `ontouchstart` is not a recognized attribute in the HTML specification.

### ✅ Valid: Using `addEventListener` for `touchstart`

```html
<div id="touch-target">Tap me</div>
<script>
  document.getElementById("touch-target").addEventListener("touchstart", function(event) {
    // Handle touch interaction
  });
</script>
```

The `touchstart` event is attached through JavaScript, keeping the HTML valid and clean.

### ✅ Valid: Using Pointer Events for cross-input support

```html
<button id="action-btn" type="button">Tap or click me</button>
<script>
  document.getElementById("action-btn").addEventListener("pointerdown", function(event) {
    // Handles mouse, touch, and pen input
  });
</script>
```

Using `pointerdown` instead of `touchstart` provides a single handler that works across all input types. Note also the use of a `<button>` element, which is natively focusable and accessible, making it a better choice than a `<div>` for interactive elements.

### ✅ Valid: Supporting both touch and non-touch with separate listeners

```html
<div id="interactive-area" role="button" tabindex="0">Interact with me</div>
<script>
  var el = document.getElementById("interactive-area");

  el.addEventListener("touchstart", function(event) {
    // Handle touch-specific interaction
  });

  el.addEventListener("click", function(event) {
    // Handle mouse and keyboard interaction
  });
</script>
```

If you must use a `<div>` as an interactive element, add `role="button"` and `tabindex="0"` for accessibility, and attach both `touchstart` and `click` listeners to cover all input methods.