从画布上的链接集调用JavaScript函数会打开一个带有错误的新标签

Question

我正在尝试在HTML5 Canvas的特定部分上设置超链接。 我希望单击该超链接会调用Javascript函数，该函数会更改画布本身上的某些内容，但不会打开任何新的浏览器选项卡或页面。 但是，我得到的是（i）画布内容实际上是由我调用的函数实际更改的（ii）我得到一个新的broser选项卡，显示错误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)
    {
      ...
    }
}

Answer 1

忘记问题。 代码还可以。 显然我正在使用存储在缓存中的Java文件的先前错误版本。 现在工作正常。

给您带来不便，并感谢大家（特别是“在这里的东西”）看过这篇文章并尝试找出我所描述的行为的原因。

问候