简体   繁体   English

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

[英]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. 我正在尝试在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. 我希望单击该超链接会调用Javascript函数,该函数会更改画布本身上的某些内容,但不会打开任何新的浏览器选项卡或页面。 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. 但是,我得到的是(i)画布内容实际上是由我调用的函数实际更改的(ii)我得到一个新的broser选项卡,显示错误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: 我的代码是(我使用了几年前“ 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?
  }
} 

The code of print_meteosarriaYearMonthData is 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)
    {
      ...
    }
}

Forget the question. 忘记问题。 The code was OK. 代码还可以。 Apparently I was working with a previous wrong version of the Javascript file stored in the cache. 显然我正在使用存储在缓存中的Java文件的先前错误版本。 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 问候

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 调用Javascript函数的Href链接会打开一个新选项卡,但在Firefox中不起作用 - Href link that calls Javascript function opens a new tab and doesn't work in Firefox 选择“在新选项卡中打开链接”和“在新窗口中打开链接”后调用Javascript函数 - Calling Javascript function after selecting “Open link in new tab” and “Open link in new windw” 从新标签页中的当前标签页调用函数 - Calling function from current tab in a new tab 调整javascript功能以在新标签页中打开链接 - Adapting javascript function to open link in new tab Firefox链接到javascript函数在不打算时打开一个新窗口 - Firefox link to javascript function opens a new window when not intended 在新选项卡中打开链接的 HTML 按钮 - HTML button thats opens link in new tab 语法错误: <a>链接无法通过单击操作,只能通过右键单击+“在新选项卡中打开链接”命令打开</a> - Syntax error: <a> link not working by clicking, only opens by right click + “open link in new tab” command 带有javascript链接的HTML _blank打开空白标签 - HTML _blank with javascript link opens empty tab 使用JavaScript时,如何创建自动单击链接并在新标签页中打开它的代码? - When using JavaScript, how do I create code that automatically clicks a link and opens it in a new tab? 如何使用jQuery / Javascript模拟单击在新标签页/窗口中打开的链接? - How do I simulate clicking a link that opens in a new tab/window using jQuery/Javascript?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM