如何在这段代码中使用 onmouseover？答案

【问题标题】：how to use onmouseover in this code?如何在这段代码中使用 onmouseover？
【发布时间】：2014-03-12 02:51:06
【问题描述】：

我想在这段 javascript 代码中使用 onmouseover。因此，每当我将鼠标移到正方形上时，changeColor 函数都会执行并每次从两种给定颜色中选择一种颜色。

<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<h1>Canvas Art Gallary</h1>
<canvas id="myCanvas" width="400" height="300" style="border:10px solid #c3c3c3">
</canvas>
<script type="text/javascript">
function changeColor(){
    ctx.fillStyle = "#FFFFFF";
    ctx.fillStyle = "#04B45F";
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(150,100,100,100);
</script>
</body>
</html>

谢谢

【问题讨论】：

您的问题是“如何在 javascript 中创建 mouseover 事件处理程序”？（在代码中没有看到任何鼠标悬停事件）欢呼
我不相信画布元素上的鼠标事件有任何原生支持。但是我使用了 Kinetic JS 库，它确实实现了事件处理：html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover
是的，rob，我将如何创建它？这就是我想要的？？我知道我必须在代码中的某处使用 onmouseover 并将函数 changeColor 放在那里，但我会在哪里以及如何？？？
你应该参考矩形在画布中的位置，然后在鼠标悬停（htmlcanvaselement显然已经支持鼠标悬停事件）上，检查你的鼠标指针是否在矩形的边界上，另一种方法是使用像 Fabricjs 或 Paperjs 这样的画布框架...

标签： javascript canvas

【解决方案1】：

监听鼠标事件并在我们自己的自定义mouseenter上切换颜色

注意：矩形没有mouseenter，所以我们必须自定义构建一个。

监听 mousemove 事件
在 rect mouseenter 上：将 wasInside 标志设置为 true 并 changeColor() 来切换 rect 颜色
在 rect mouseleave 上：清除 wasInside 标志以指示鼠标已离开 rect。

示例代码和演示：http://jsfiddle.net/m1erickson/9GcbH/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color:ivory; }
    #canvas{border:1px solid red;background-color:black;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    var scrollX=$canvas.scrollLeft();
    var scrollY=$canvas.scrollTop();

    var toggle=0;
    var x=150;
    var y=100;
    var w=100;
    var h=100;
    var wasInside=false;

    // draw the rect to start
    ctx.fillStyle = "red";
    ctx.fillRect(x,y,w,h); 

    function changeColor(){
      if(toggle==0){
          ctx.fillStyle = "#FFFFFF";
          toggle=1; 
      }else{
          ctx.fillStyle = "#04B45F"; 
          toggle=0;
      }
      ctx.fillRect(x,y,w,h); 
    } 


    function handleMouseMove(e){

        e.preventDefault();
        var mx=parseInt(e.clientX-offsetX);
        var my=parseInt(e.clientY-offsetY);

        var isInsideNow=(mx>x && mx<x+w && my>y && my<=y+h);

        if(isInsideNow && !wasInside){
            changeColor();
            wasInside=true;
        }else if(!isInsideNow && wasInside){
            wasInside=false;
        }

    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Rect color toggles white-green<br>each time mouse moves over it.</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

[补充说明切换步骤]

每次鼠标进入矩形时都会调用changeColor。

changeColor 既改变颜色，也改变切换。

这里是一步一步的：

1. toggle==0 at the beginning of the ap
2. mouse enters rect and changeColor is called.
3. changeColor changes color to #ffffff because toggle==0.
4. changeColor changes toggle=1
5. mouse exits rect
6. mouse enters rect again and changeColor is called again.
7. changeColor changes color to #04b45f because toggle==1.
8. changeColor changes toggle=0;

【讨论】：

为什么即使系统从不执行 else 语句，我仍然能够看到绿色（#04B45f）颜色，因为 toggle = 0 并且您在代码之后有 toggle = 1 但那没有不是说它会通过其他代码，是吗？我认为它不会因为上面已经进行了检查，但代码仍然有效，怎么样？？
在我的小提琴中，我最初用绿色绘制了矩形。在上面的代码示例中，我最初将矩形绘制为红色（表示它从未被鼠标输入过。
我仍然不明白当“else”cmd 从未通过时它是如何变为绿色的！
我添加了关于切换如何工作的分步说明:-)
啊，谢谢你，我来自 Java，所以我想没有 while 循环，所以程序永远不会再通过 if else 代码。顺便说一句，您如何选择最佳答案？？？

【解决方案2】：

mouseover 只会知道您何时在画布上方，因此您需要检测您是否在正方形上方（我正在使用您已经定义的变量）：

var sqx1 = c.offsetLeft +  150; //left top corner of the square respect to the window
var sqy1 = c.offsetTop + 100;
var sqx2 = sqx1 + 100;  //right bottom corner of the square respect to the window
var sqy2 = sqy1 + 100;

var lastOverSquare = false;
c.addEventListener('mousemove', function(e) {
     var overSquare = 
          (sqx1 <= e.pageX && sqx2 >= e.pageX) &&
          (sqy1 <= e.pageY && sqy2 >= e.pageY);

     if (overSquare && !lastOverSquare) changeColour(); //change only when it enters the square, not every move when we're already over it.
     lastOverSquare = overSquare;
}, false);

var colours = ['#FFFFFF', '#04B45F'];
var currentColour = 0;
ctx.fillStyle = colours[currentColour];
function changeColour() {
    currentColour = (currentColour + 1) % colours.length;
    ctx.fillStyle = colours[currentColour];
}

【讨论】：