странное поведение «OnClick» события кнопки

Question

HTML:

<div id="container"> 
     <canvas id="canvas" width="1024" height="1024"></canvas> 

</div> 
<button id = "click" >fire</button> 

<script type="text/javascript" src = "Jquery/easy.js"></script> 

JavaScript:

var ctx = canvas.getContext('2d'); 
var chop1 = new Image(); 
chop1.src = "img/chopper.png"; 
var blt = new Image(); 
blt.src = "img/bullet.png" 
var chopperX = 0; 
var chopperY = 0; 
var ascent = 2; 
var limit = 500; 
var start = null; 
var bltX = 135; 
var hit = document.getElementById("click"); 
window.onclick = function() 
{ 
fly() 
} 
hit.onclick = function() 
{ 
    fire(); 
} 

function fire() 
{ 
bltX +=ascent; 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.drawImage(blt,bltX,30, 
chop1.width, chop1.height); 

requestAnimationFrame(fire); 



} 


function up() 
{ 
    chopperY-=ascent; 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(chop1,0,chopperY , 
       chop1.width, chop1.height); 

    requestAnimationFrame(up); 




if(chopperY == 0){ 

    fly(); 
    } 
} 

function fly() { 
chopperY+=ascent; 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.drawImage(chop1,0,chopperY , 
       chop1.width, chop1.height); 
if (chopperY < limit) { 
    requestAnimationFrame(fly); 
} 
if(chopperY==limit){ 

    up(); 
} 
} 

Когда я нажимаю на кнопку огня не вызывать метод «огонь» и вызовы функция «летать». Я хочу знать, почему метод «летать» вызывается вместо метода «огонь»? Есть ошибки уточняться здесь Code? Каково его решение?

Answer 1

У вас есть два обработчика событий

window.onclick = function() { 
    fly() 
} 
hit.onclick = function() { 
    fire(); 
} 

который, кстати, можно было бы написать

window.onclick = fly; 

и т.д. Но кликах пузырьки к window уровня при нажатии какой-либо элемент внутри window, даже hit, так называется функция fly().

Вы могли бы попытаться остановить при распространении

hit.onclick = function(event) { 
    event.stopPropagation(); 
    fire(); 
} 

Answer 2

Там уже есть решение вашей проблемы: see here

То, что вы хотите сделать, это:

document.getElementById("click").onclick = fire;