[英]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.