On each web page, can actions triggered with a pointing device on a single point of the screen be cancelled (except in special cases)?

A user accidentally presses 'Delete account'. If your button reacts on press (pointerdown), the action executes before they release their finger. If it reacts on release (pointerup), the user can still move their cursor away from the target to cancel. A fraction of a second. All the difference.

For each action triggered by a pointer at a single point on the screen, at least one of these three conditions must be met: the action triggers on pointer release; the action triggers on press but is canceled on release; a mechanism exists to abandon (before completion) or cancel (after completion). The criterion gives you the choice of condition.

Drag-and-drop deserves special attention. Two levels are required: releasing the element outside the target zone must cancel the current operation; once the drop is complete, the user must be able to cancel it via a confirmation dialog or by repositioning the element to its original location.

Native elements (<button>, <a>, <input>) trigger their actions on the click event, which executes on release. Compliance provided by the browser. The problem arises from custom mousedown or pointerdown handlers that provide no cancellation.

Un test to ensure that the action on hover can be cancelled

Examples

<button id="btn-delete">Delete file</button>
<script>
  document.getElementById('btn-delete').addEventListener('mousedown', function () {
    deleteFile(); // Executed on press: impossible to cancel before release
  });
</script>

<button id="btn-delete">Delete file</button>
<script>
  document.getElementById('btn-delete').addEventListener('click', function () {
    // 'click' triggers on release: dragging the cursor away from the button before releasing cancels the action
    deleteFile();
  });
</script>

<div id="drop-zone"
     ondragover="event.preventDefault()"
     ondrop="confirmDrop(event)">
  Drop zone
</div>
<script>
  function confirmDrop(event) {
    event.preventDefault();
    var file = event.dataTransfer.getData('text/plain');
    if (confirm('Move this file to this folder?')) {
      moveFile(file);
    }
    // If the user chooses Cancel, the file remains at its original position
  }
</script>

Tips and pitfalls

Frequently asked questions

References