当鼠标悬停在它上面时，JS Button 消失

Question

我正在用 javascript 制作一个按钮。当我点击“点击我”的框时，它应该打印“现在你点击我”这一行。但是，当我将它嵌入 HTML 文件并使用 chrome 打开它时，出现了问题。最初，按钮出现，但当鼠标悬停在它上面时，整个按钮消失。当我点击按钮所在的位置时，它仍然会打印该行。这是我的代码，改编自可汗学院关于绘制按钮的计算机科学课程。此外，该代码在可汗学院中有效，但当我使用 chrome 打开它时却无效。有什么方法可以让按钮停留在屏幕上，即使我将鼠标悬停在它上面吗？

<!DOCTYPE html>
<!-- This is based on DillingerLee's great template here:
https://github.com/Team-Code/KA_Offline -->
<html> 
 <head>
    <title>Processing.JS inside Webpages: Template</title> 
</head>
 <body>
    <p align="center"> 
    <!--This draws the Canvas on the webpage -->
      <canvas id="mycanvas"></canvas> 
    </p>
 </body>
 
 <!-- Run all the JavaScript stuff -->
 <!-- Include the processing.js library -->
 <!-- See https://khanacademy.zendesk.com/hc/en-us/articles/202260404-What-parts-of-ProcessingJS-does-Khan-Academy-support- for differences -->
 <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> 
 
 <script>
    var sketchProc = function(processingInstance) {
     with (processingInstance) {
        size(600, 400); 
        frameRate(30);
        
/******************
*Button Object Type
*******************/

var Button = function(config) {
    this.x = config.x || 0;
    this.y = config.y || 0;
    this.width = config.width || 80;
    this.height = config.height || 50;
    this.label = config.label || "Click";
    this.color = config.color || color(207, 85, 85);
    this.onClick = config.onClick || function() {};
};

//draw the button
Button.prototype.draw = function() {
    if (this.isMouseInside() && mouseIsPressed()) {
        fill(255, 255, 255);
    }
    else {
       fill(this.color); 
    }
    rectMode(CENTER);
    rect(this.x, this.y, this.width, this.height, 5);
    fill(0, 0, 0);
    textSize(19);
    textAlign(CENTER, CENTER);
    text(this.label, this.x, this.y);
};

//check if mouse cursor is inside the button
Button.prototype.isMouseInside = function() {
    return mouseX > this.x-this.width/2 &&
           mouseX < (this.x + this.width/2) &&
           mouseY > this.y - this.height/2 &&
           mouseY < (this.y + this.height/2);
};

//handle mouse clicks for the button
Button.prototype.handleMouseClick = function() {
    if (this.isMouseInside()) {
        this.onClick();
    }
};


/** create object instances **/

//create button
var btn1 = new Button(
    {
        x:width/2,
        y:height/2,
        width : 72,
        height : 36,
        label : "Click me",
        color: color(35, 176, 110),
        onClick : function(){
            println("Now you clicked me");
        }
    }
);
draw = function() {
    background(98, 122, 54);
    //Draw the button
    btn1.draw();
};

    
mouseClicked = function() {
    btn1.handleMouseClick();
};
    }};

    // Get the canvas that Processing-js will use
    var canvas = document.getElementById("mycanvas"); 
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc); 
 </script>

</html>

Answer 1

该代码正在使用名为 Processing 的库。这是第 42 行的问题。您应该使用 this.mouseIsPressed

而不是 mouseIsPressed()

if (this.isMouseInside() && this.mouseIsPressed) {
    fill(255, 255, 255);
}

使用错误的代码，如果您打开 Chrome 开发工具 (F12)，并尝试将鼠标悬停在它上面，您会在控制台上看到一条错误消息，显示“mouseIsPressed() is not一个函数”，因为你没有定义这个函数。您应该使用 this 关键字引用 Button 对象，然后访问 mouseIsPressed，这在我看来像是一个内置的 Processing 变量。

Answer 2

当运行您的代码，当您将鼠标悬停在按钮上时，浏览器的控制台中会打印以下错误（按 F12 并单击控制台以查看此错误）：这意味着 HTML 文件的第 42 行会引发错误。让我们调查一下！

这一行可以找到如下代码：

if (this.isMouseInside() && mouseIsPressed())

显然，此 if 语句的第二部分未定义。

查看 p5.js 网站 (link) 上的文档，看起来 mouseIsPressed 是一个布尔值（真或假）而不是函数，因此应该不能使用括号调用。以下应该然后工作：

if (this.isMouseInside() && mouseIsPressed)

但是，至少对我来说，这仍然无法按预期工作。抛出类似的错误。查看 processing.org 在线文档，我发现了对 mousePressed 布尔值的引用（link）。

最后，使用它，代码按预期工作：

if (this.isMouseInside() && mousePressed)

如果我理解正确，您可以创建自己的自定义函数 mouseIsPressed 和 mousePressed，然后在此类事件发生时通过处理自动调用它们，但在这种情况下使用布尔值更简单，应该足够了。

当鼠标悬停在它上面时，JS Button 消失

JS Button disappear when mouse hovers above it

javascript

html

button

mouseevent

mouseover