p5.js 元素 mouseOver() 方法

简介

p5.js 是一款基于 Processing 的 JavaScript 图形库，拥有丰富的 API 和友好的文档。其中，mouseOver() 方法是 p5.js 中用于检测鼠标悬停事件的方法，可用于检测鼠标是否进入到指定元素。

语法

mouseOver(callback);

参数说明

• callback: 鼠标悬停事件发生时执行的回调函数。

实例

let myElement;

function setup() {
  createCanvas(400, 400);
  myElement = createDiv('Move your mouse over me!');
  myElement.mouseOver(changeText);
}

function changeText() {
  myElement.html('Now move your mouse out of me!');
}

function draw() {
  background(220);
  ellipse(mouseX, mouseY, 50, 50);
}

上面的代码定义了一个含有一个 DIV 元素的页面，当鼠标进入该元素时，文字变成“Now move your mouse out of me!”。

注意事项

• mouseOver() 只能用于 p5.js 元素对象，例如 p5.Element 或 p5.prototype。
• 在多个元素上使用 mouseOver() 方法时，需要注意先后顺序，确保父元素和子元素不会相互影响。

参考链接

• p5.Element.mouseOver()