从canvas的链接集调用JavaScript函数会打开一个带有错误的新选项卡

Calling a JavaScript function from a link set at canvas opens a new tab with an error

本文关键字:一个 新选项 选项 有错误 链接 canvas 调用 JavaScript 函数      更新时间:2023-09-26

我试图在HTML5 Canvas的特定部分设置超链接。我希望点击该超链接调用一个Javascript函数,改变画布上的一些内容本身,但不打开任何新的浏览器选项卡或页面。然而,我得到的是(I)画布内容实际上被我调用的函数改变了,但是(ii)我得到一个新的浏览器选项卡,显示错误ERR_EMPTY_RESPONSE。我怎样才能解决这个问题呢?提前感谢!

我的代码是(我使用的是几年前'dogbane'在这里发布的"画布上的链接"解决方案的变体:

// this function is called from WITHIN another function (print_meteosarriaYearMonthData) which contains the variable declarations 
function draw_link(ctx)
{
   //add mouse listeners
    canvas.addEventListener("mousemove", on_mousemove, false);
    canvas.addEventListener("click", on_click, false);
}
//check if the mouse is over the link and change cursor style
function on_mousemove (ev) {
  var x, y;
  // Get the mouse position relative to the canvas element.
  if (ev.layerX || ev.layerX == 0) { //for firefox
    x = ev.layerX;
    y = ev.layerY;
  }
  x-=canvas.offsetLeft;
  y-=canvas.offsetTop;
  //is the mouse over the link?
  if(x>=linkX && x <= (linkX + linkWidth) && y<=linkY && y>= (linkY-linkHeight)){
      document.body.style.cursor = "pointer";
      inLink=true;
  }
  else{
      document.body.style.cursor = "";
      inLink=false;
  }
}
//if the link has been clicked, go to link
function on_click(e) {
  if (inLink)  {
    // this function is where the link-related functions are embedded and does the job of changing the canvas contents (depending on the parameter METEODATA_MONTH or METEODATA_YEAR
    print_meteosarriaYearMonthData(METEODATA_MONTH);
    return false;  // is this necessary?
  }
} 

print_meteosarriaYearMonthData的代码为

function print_meteosarriaYearMonthData(yearOrMonth)
{
    var canvas = document.getElementById("meteoinfo");
    var ctx = canvas.getContext("2d");

    var linkWidth;
    var linkHeight;
    var linkX;
    var linkY;
    if (yearOrMonth == METEODATA_YEAR)
    {
        // PRINT YEAR
       <...code to pint year>
        // Print tab & dimmed month with link 
        <further code to print data on canvas>
        linkWidth = ctx.measureText(month+"/"+year).width;
        linkHeight = 30;
        linkX = meteoYearDataYearAnchorX+50;
        linkY = meteoYearDataYearAnchorY-20;;
        draw_link(ctx);   // CALL TO DRAW LINK FUNCTION
        // Get yearly data
        <code to get & print yearly data > 
    }
    else
    {
        // PRINT MONTH
      <code to print current month>

    }
    // start of draw_link, on_mousemove & on_click functions code
    function draw_link(ctx)
    {
      ...
    }
    function on_mousemove(ctx)
    {
      ...
    }
    function on_click(ctx)
    {
      ...
    }
}

别管这个问题了。代码没问题。显然,我正在使用存储在缓存中的Javascript文件的先前错误版本。现在运行正常。

请原谅给您带来的不便,并感谢所有可能看过这篇帖子并试图找到我所描述行为原因的人(特别是"somethinghere")。