简体   繁体   中英

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

I'm trying to set a hyperlink on a specific part of an HTML5 Canvas. I want that clicking of that hyperlink calls a Javascript function that changes some contents onthe canvas itself but does ont open any new browser tab or page. However, what I'm getting is (i) the canvas contents re actually changed by the function I'm calling BUT (ii) I get a new broser tab displaying an error ERR_EMPTY_RESPONSE. How can I fix that? Thanks in advance!

My piece of code is (I'm using a variation of the the "link on canvas" solution posted here by 'dogbane' some years ago:

// 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?
  }
} 

The code of print_meteosarriaYearMonthData is

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)
    {
      ...
    }
}

Forget the question. The code was OK. Apparently I was working with a previous wrong version of the Javascript file stored in the cache. Now it is working fine.

Excuse the inconveniences and thank you everybody (in particular to 'somethinghere') who may have looked at the post and try to find a cause for the behaviour I described.

Regards

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM