processing/p5.js

Missing mouseReleased event with createSelect DOM object in Safari

クローズ

#8,293 opened on 2025/11/25

 (8 件のコメント) (0 件のリアクション) (0 人の担当者)JavaScript (3,178 件のフォーク)batch import
Area:DOMArea:EventsBugHelp Wanted

Repository metrics

Stars
 (20,784 個のスター)
PR merge metrics
 (平均マージ 8d 13h) (30d で 45 merged PRs)

説明

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • p5.strands
  • WebGL
  • DevOps, Build process, Unit testing
  • Internationalization (i18n)
  • Friendly Errors
  • Other (specify if possible)

p5.js version

1.11.11

Web browser and version

Safari Version 26.0.1 (20622.1.22.118.4).

Operating system

MacOSX

Steps to reproduce this

Likely a bug with Safari/DOM, but worth seeing if something could be resolved from within p5js code. When creating a dropdown DOM with createSelect() function in p5js, it seems that on Safari, interactions with that dropdown are triggering a p5js mousePressed event but not a corresponding p5js mouseReleased event. This leaves internal variable mouseIsPressed set to true, and subsequent mouse move events are being categorized as mouse draw events from within src/events/mouse.js as a result. Problem was reproduced on two machines using MacOSX + Safari, but the problem does not occur when using Chrome or Firefox on those same machines, nor when using Safari on an iPad.

Steps:

  1. Click on the dropdown widget to make selection
  2. Release mouse after making selection
  3. Mouse over the p5js Canvas.

Snippet:


// Demo at https://editor.p5js.org/michaelgoldwasser/sketches/Dbdib65Qp
function setup() {
  createCanvas(400, 400);
  background(220);
  noStroke();
  selector = createSelect();
  selector.option("red", color(255, 0, 0));
  selector.option("blue", color(0, 0, 255));
}

function mousePressed() {
  console.log("mousePressed fired");
}

function mouseReleased() {
  console.log("mouseReleased fired");
}

function mouseDragged() {
  fill(selector.value());
  circle(mouseX, mouseY, 5);
}

コントリビューターガイド