当鼠标悬停在其上方时，JS Button 消失答案

【问题标题】：JS Button disappear when mouse hovers above it当鼠标悬停在其上方时，JS Button 消失
【发布时间】：2021-09-23 05:25:15
【问题描述】：

我正在用 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>

【问题讨论】：

标签： javascript html button mouseevent mouseover

【解决方案1】：

代码使用了一个名为 Processing 的库。这是第 42 行的问题。您应该使用this.mouseIsPressed 而不是mouseIsPressed()

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

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

【讨论】：

【解决方案2】：

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

在这一行，可以找到以下代码：

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

显然，这个 if 语句的第二部分没有定义。

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

if (this.isMouseInside() && mouseIsPressed)

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

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

if (this.isMouseInside() && mousePressed)

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

【讨论】：