JavaScript Document createTouch() Method

What You’ll Learn

document.createTouch() is a deprecated, non-standard instance method that once created Touch objects (see MDN Document: createTouch()). Learn its parameters, MDN’s example, how to feature-detect safely, what to use instead (TouchEvent()), and five try-it labs that still make sense when the API is missing.

Introduction

A Touch object describes one finger (or stylus contact) on a touch surface — an identifier plus coordinates such as pageX / pageY.

Years ago, some engines exposed document.createTouch(...) so scripts could build those objects by hand (often for tests or synthetic events). MDN now labels the method deprecated and non-standard, and points you to the TouchEvent() constructor instead.

Related tutorials: createEvent() (also deprecated), createRange(), JavaScript hub.

Understanding document.createTouch()

An instance method on Document that builds a Touch from optional arguments (MDN).

• Purpose (legacy) — create a configured Touch object (MDN).
• Parameters — all optional: view, target, identifier, pageX/Y, screenX/Y (MDN).
• Return value — a Touch object (MDN).
• Extra old params — clientX/Y, radiusX/Y, rotationAngle, force are deprecated; do not use (MDN).
• Modern replacement — MDN: use the TouchEvent() constructor.
• Support reality — often removed; feature-detect every time.

📝 Syntax

General form of Document.createTouch (MDN):

createTouch(view, target, identifier, pageX, pageY, screenX, screenY)

Parameters

MDN: all parameters are optional.

• view — the window in which the touch occurred (MDN).
• target — the EventTarget for the touch (MDN).
• identifier — value for Touch.identifier (MDN).
• pageX / pageY — page coordinates (MDN).
• screenX / screenY — screen coordinates (MDN).

MDN also lists older parameters (clientX, clientY, radiusX, radiusY, rotationAngle, force) that should be considered deprecated and not used.

Return value

A Touch object configured as described by the input parameters (MDN).

Exceptions

None highlighted on MDN for the method itself. Calling a missing method throws TypeError — always feature-detect.

MDN example

const target = document.getElementById("target");

const touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
const touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);

⚖️ Legacy createTouch vs modern input APIs

Examples Gallery

Examples follow MDN Document: createTouch() and safe feature-detection patterns. On many desktops the method is missing — that is expected.

const supported = typeof document.createTouch === "function";
console.log(supported ? "createTouch available (legacy)" : "createTouch missing");

if (!supported) {
  console.log("Prefer TouchEvent() / real touch or pointer events (MDN).");
}

createTouch missing
Prefer TouchEvent() / real touch or pointer events (MDN).

const target = document.getElementById("target");

if (typeof document.createTouch === "function") {
  const touch1 = document.createTouch(window, target, 1, 15, 20, 35, 40);
  const touch2 = document.createTouch(window, target, 2, 25, 30, 45, 50);
  console.log(touch1.identifier, touch2.identifier); // 1 2
} else {
  console.log("createTouch not available");
}

createTouch not available

const el = document.getElementById("target");

if (typeof document.createTouch !== "function") {
  console.log("skipped — API missing");
} else {
  const t = document.createTouch(window, el, 7, 100, 200, 110, 210);
  console.log(t.identifier); // 7
  console.log(t.pageX, t.pageY); // 100 200
  console.log(t.screenX, t.screenY); // 110 210
  console.log(t.target === el); // true
}

skipped — API missing

console.log("createTouch:", typeof document.createTouch);
console.log("TouchEvent:", typeof TouchEvent);

// Prefer listening to real input in apps:
document.addEventListener("touchstart", (event) => {
  const first = event.changedTouches[0];
  if (first) console.log("real touch id", first.identifier);
}, { once: true });

console.log("For UI, also consider Pointer Events (pointerdown).");

createTouch: undefined
TouchEvent: function
For UI, also consider Pointer Events (pointerdown).

if (typeof document.createTouch !== "function") {
  console.log("createTouch unavailable — cannot demo optional args");
} else {
  const bare = document.createTouch();
  const partial = document.createTouch(window, document.body, 3);
  console.log("bare identifier:", bare.identifier);
  console.log("partial identifier:", partial.identifier);
}

createTouch unavailable — cannot demo optional args

🚀 Common Use Cases

• Reading legacy samples — understand old touch-test helpers.
• Migrating old code — replace createTouch with standard events / constructors.
• Interview trivia — know it is deprecated and non-standard (MDN).
• Not for new apps — use real touch events or Pointer Events.
• Not a mobile detector — never treat createTouch presence as “is phone”.
• Paired legacy API — watch for createTouchList in the same old codebases.

📝 Notes

• MDN: Deprecated and Non-standard.
• Not part of any current specification; not on track to become a standard (MDN).
• Prefer the TouchEvent() constructor (MDN note).
• All listed primary parameters are optional (MDN).
• Do not use the older extra parameters (clientX/Y, radius, force, …) (MDN).
• Related learning: createEvent(), createTextNode(), JavaScript hub.

💡 Best Practices