当鼠标悬停在其上方时 JS 按钮消失

编程问答 2022-12-17

问题描述

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

解决方法

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

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

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

,

运行代码时，当您将鼠标悬停在按钮上时，浏览器的控制台中会打印以下错误（按 F12 并单击控制台可查看）： stack trace 这意味着 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，然后在发生此类事件时通过处理自动调用它们，但在这种情况下使用布尔值是更简单，应该足够了。

buttonbuttonbuttonhtmljavascriptmouseeventmouseover