btn1将btn的事件覆盖掉了应该怎么解决

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.border=" 1px solid #aaa";
ctx.shadowBlur=20;
ctx.fillStyle="#F0FFF0";
ctx.shadowColor="green";
ctx.fillRect(20,20,1000,600);
ctx.fillStyle="yellow";

function Button1(){
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.save();
ctx.beginPath();
ctx.fillRect(750,560,60,40);
ctx.font="25px Arial";
ctx.fillStyle="#000000 "//字体颜色
ctx.fillText("隐藏",755,590);//要填充的字及位置
ctx.closePath();
}

function Button(){
   var c=document.getElementById("canvas");
   var ctx=c.getContext("2d");
   ctx.save();
   ctx.beginPath();
   ctx.fillRect(150,560,60,40);
   ctx.font="25px Arial";
   ctx.fillStyle="#000000 "//字体颜色
   ctx.fillText("显示",155,590);//要填充的字及位置
   ctx.fillStyle="yellow";
   ctx.closePath();
}

window.onload=function(){
   btn=new Button();
   btn.on("click",show);
var show=function(){
    alert("显示");
}

btn1=new Button1();
btn1.on("click",hide);
var hide=function(){
alert("yincang");
}
}

Button.prototype.on=function(events,fn){
    var c=document.getElementById("canvas");
    var ctx=c.getContext("2d");
     c.onclick=function(e){
      e=e||event;
      var x=e.offsetX;
      var y=e.offsetY;
      if(x>=150&&x<=210&&y>=560&&y<=600){
         //btn.addEventListener(events,fn);
         alert("你hao");
        }
      }
    }
Button1.prototype.on=function(events,fn){
    var q=document.getElementById("canvas");
    var ctx=q.getContext("2d");
     q.onclick=function(e){
       e=e||event;
      var x=e.offsetX;
      var y=e.offsetY;
      if(x>=750&&x<=810&&y>=560&&y<=600){
        //btn.addEventListener(events,fn);
        alert("你好");
        }
      }
    }

</script>
</body>
</html>

慕粉2308161447

浏览 1272回答 1

1回答

ruibin

你可以把c.onclick=function(e){ 改成c.addEventListener('click', function() { 然后就可以了。因为onclick只支持一个，addEventListener可以支持多个。

1 0

随时随地看视频慕课网APP

btn1将btn的事件覆盖掉了 应该怎么解决

1回答

btn1将btn的事件覆盖掉了应该怎么解决