Javascript" onmousemove()"适用于Chrome,但不适用于Firefox

时间:2014-06-27 04:48:23

标签: javascript html firefox canvas

我已经尝试过谷歌搜索,但找不到任何解决方案。

当鼠标悬停在底部时,底部的四个塔应该显示不同的图像(透明度较低)。这在谷歌浏览器中完美运行,但在Firefox中无法运行。

这是网站:http://cdelphinus.com/test/mormontowerdefense.html(您可以右键点击>查看来源)了解整个代码(app.js)

这是问题代码:

在我的HTML中:

<canvas id="Canvas_One" width="1160" height="580" style="border:2px solid yellow;          background-color:black; padding-left:0;margin-left:0;" onmousemove="lolol(event)"    onclick="haha(event)"></canvas>

在我的app.js文件中:

这是我的问题的一个非常简洁的版本,这适用于chrome而不是firefox:

//function lolol(event) {
//  event = event || window.event;
//      alert(event.x);
//}

我有一种感觉,一旦上面的警告显示在firefox中,剩下的就会被神奇地修复。

这里有更详细的内容

function lolol(event) {
event = event || window.event;
ix = event.x - canvas.offsetLeft + 10;  
iy = event.y- canvas.offsetTop  + document.body.scrollTop;
//...
if(iy > 510) {
    var dist = Math.round(ix / 50) - 1;
    if(dist < towerpurchaseoptions.length){
    towerpurchaseoptions[dist].isActive = true;
    //textout(towerpurchaseoptions[dist].name);
     for(var i=0; i<towerpurchaseoptions.length; i++) {
         if(i != dist) {
    towerpurchaseoptions[i].isActive = false;
         }
     }
}  
}
//....
}

如果towerpurchaseoptions [n] .isActive == true,图像将替换为透明度较低的图像

1 个答案:

答案 0 :(得分:1)

我只是因为

检查了你的问题
function lolol(event) {
     event = event || window.event; //For IE

    ix = event.x - canvas.offsetLeft + 10;

//这里ix正在r nan

    iy = event.y- canvas.offsetTop  + document.body.scrollTop;

//在这里,我正在喋喋不休地 nan

为什么这个? 因为事件在firefox中没有属性.x可能是一些问题,你可以把它改成

 function lolol(event) {
         event = event || window.event; //For IE

        ix = event.clientX - canvas.offsetLeft + 10;


        iy = event.clientY- canvas.offsetTop  + document.body.scrollTop;

它会起作用。