當鼠標懸停在其上方時 JS 按鈕消失

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( ) 不是函數”，因為您沒有定義此函數。 您應該使用this關鍵字來引用Button對象，然后訪問mouseIsPressed ，它在我看來就像一個內置的 Processing 變量。

Answer 2

運行代碼時，當您將鼠標懸停在按鈕上時，瀏覽器的控制台中會打印以下錯誤（按 F12 並單擊控制台查看）： 這意味着 HTML 文件第 42 行上的某些內容會引發錯誤。 讓我們調查一下！

在這一行，可以找到以下代碼：

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

顯然，這個 if 語句的第二部分沒有定義。

查看 p5.js 網站（鏈接）上的文檔，它看起來像mouseIsPressed是一個布爾值（true 或 false）而不是函數，因此不應使用括號調用。 下面應該工作：

if (this.isMouseInside() && mouseIsPressed)

但是，至少對我來說，這仍然無法按預期工作。 拋出類似的錯誤。 查看 processing.org 在線文檔，我發現了一個對mousePressed布爾值的引用（鏈接）。

最后，使用它，代碼按預期工作：

if (this.isMouseInside() && mousePressed)

如果我理解正確，您可以創建自己的自定義函數，稱為mouseIsPressed和mousePressed ，然后在發生此類事件時通過處理自動調用它們，但在這種情況下，使用布爾值更簡單，應該就足夠了。

當鼠標懸停在其上方時 JS 按鈕消失

問題描述

2 個解決方案

解決方案1
1 2021-07-14 08:54:31

解決方案2
1 已采納 2021-07-14 09:11:19

當鼠標懸停在其上方時 JS 按鈕消失

問題描述

2 個解決方案

解決方案1 1 2021-07-14 08:54:31

解決方案2 1 已采納 2021-07-14 09:11:19

解決方案1
1 2021-07-14 08:54:31

解決方案2
1 已采納 2021-07-14 09:11:19