Javascript 使用onmouseover和onmouseout事件调用和终止父函数
我想在Javascript 使用onmouseover和onmouseout事件调用和终止父函数,javascript,function,dom-events,Javascript,Function,Dom Events,我想在onmouseover=“ParentFunction（）；”上调用该函数，然后杀死它onmouseout=“killParent（）；” 注意：在我的代码中，父函数被称为initiate（）和killer函数被称为reset（）位于脚本底部父函数之外 我不知道如何终止initiate（）函数我的第一个猜测是： var reset = function(){ return initiate(); }; 这里是我的源代码：任何建议和帮助，谢谢 <!doctype ht
onmouseover=“ParentFunction（）；”onmouseout=“killParent（）；”initiate（）和killer函数被称为reset（）位于脚本底部父函数之外
我不知道如何终止initiate（）
函数我的第一个猜测是：
var reset = function(){
return initiate();
};
这里是我的源代码：任何建议和帮助，谢谢
<!doctype html>
<html>
<head>
<title> function/event prototype </title>
<link rel="stylesheet" type="text/css" href="styling.css" />
</head>
<body>
<h2> <em>Fantastical place<br/>prototype</em> </h2>
<div id="button-container">
<div id="button-box">
<button id="activate" onmouseover="initiate()" onmouseout="reset();" width="50px" height="50px" title="Activate"> </button>
</div>
<div id="text-box">
</div>
</div>
<div id="container">
<canvas id="playground" width="200px" height="250px">
</canvas>
<canvas id="face" width="400px" height="200px">
</canvas>
<!-- <div id="clear"> </div> -->
</div>
<script>
alert("Welcome, there are x entries as of" +""+new Date().getHours());
//global scope
var i=0;
var c1 = []; //c is short for collect
var c2 = [];
var c3 = [];
var c4 = [];
var c5 = [];
var c6 = [];
var initiate = function(){ //the button that triggers the program
var timer = setInterval(function(){clock()},90); //copy this block for ref.
function clock(){
i+=1;
var a = Math.round(Math.random()*200);
var b = Math.round(Math.random()*250);
var c = Math.round(Math.random()*200);
var d = Math.round(Math.random()*250);
var e = Math.round(Math.random()*200);
var f = Math.round(Math.random()*250);
c1.push(a);
c2.push(b);
c3.push(c);
c4.push(d);
c5.push(e);
c6.push(f);
// document.write(i);
var c = document.getElementById("playground");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(c3[i-2], c4[i-2]);
ctx.bezierCurveTo(c1[i-2],c2[i-2],c5[i-2],c6[i-2],c3[i-1], c4[i-1]);
// ctx.lineTo(c3[i-1], c4[i-1]);
if(a<200){
ctx.strokeStyle="#FF33CC";
}
else if(a<400){
ctx.strokeStyle="#FF33aa";
}
else{
ctx.strokeStyle="#FF3388";
}
ctx.stroke();
document.getElementById("text-box").innerHTML=i+"<p>Thoughts.</p>";
if(i===20){
//alert("15 reached");
clearInterval(timer);//to clearInterval must be using a global scoped variable.
return;
}
}; //end of clock
//setInterval(clock,150);
var targetFace = document.getElementById("face");
var face = targetFace.getContext("2d");
var faceTimer = setInterval(function(){faceAnim()},80); //copy this block for ref. global scoped.
function faceAnim(){
face.beginPath();
face.strokeStyle="#FF33CC";
face.moveTo(100,104); //eye line
face.bezierCurveTo(150,125,250,125,300,104);
face.moveTo(200,1); //centre line
face.lineTo(200,400);
face.moveTo(125,111);//left eye lid
face.bezierCurveTo(160,135,170,130,185,120);
face.moveTo(150,116);//left eye
face.bezierCurveTo(155,125,165,125,170,118);
face.moveTo(275,111);//right eye lid
face.bezierCurveTo(240,135,230,130,215,120);
face.moveTo(250,116);//right eye
face.bezierCurveTo(245,125,235,125,230,118);
face.moveTo(195, 118); //left nose
face.lineTo(190, 160);
face.lineTo(200,170);
face.moveTo(190,160); //left nostroll
face.lineTo(180,160);
face.lineTo(191,154);
face.moveTo(180,160); //left lower nostrol
face.lineTo(200,170);
face.moveTo(205, 118); //right nose
face.lineTo(210, 160);
face.lineTo(200,170);
face.moveTo(210,160); //right nostroll
face.lineTo(220,160);
face.lineTo(209,154);
face.moveTo(220,160); //right lower nostrol
face.lineTo(200,170);
face.moveTo(200,140); //outer triad
face.lineTo(170, 100);
face.lineTo(230, 100);
face.lineTo(200, 140);
face.moveTo(200,145); //outer triad drop shadow
face.lineTo(170, 100);
face.lineTo(230, 100);
face.lineTo(200, 145);
face.moveTo(200,130); //inner triad
face.lineTo(180, 105);
face.lineTo(220, 105);
face.lineTo(200, 130);
//face.lineWidth =0.6;
face.moveTo(280,111);//outer right eye lid
face.bezierCurveTo(240,140,230,135,210,120);
face.moveTo(120,111);//outer left eye lid
face.bezierCurveTo(160,140,170,135,190,120);
face.moveTo(162,174); //upper mouth line
face.bezierCurveTo(170,180,230,180,238,174);
face.moveTo(165,175); //mouth line bottom
face.bezierCurveTo(190,Math.floor(Math.random()*25+180),210,Math.floor(Math.random()*25+180),235,175);
face.moveTo(232,204); //head shape
face.lineTo(340, 20);
face.moveTo(168,204); //head shape
face.lineTo(60, 20);
face.stroke(); //exicute all co-ords.
}; //end of face anim
var clearFace = function(){
document.getElementById('face').getContext('2d').clearRect(0, 0, 700, 750);
};
setInterval(clearFace,90);
}; //end of parent function
var reset = function(){
document.getElementById('playground').getContext('2d').clearRect(0, 0, 700, 750);
//clearInterval(faceTimer);
//delete initiate();
};
</script>
</body>
</html>
功能/事件原型
梦幻之地
原型
警报（“欢迎，截至“+”+新日期（）.getHours（））有x个条目）；
//全球范围
var i=0；
var c1=[]//c是collect的缩写
var c2=[]；
var c3=[]；
var c4=[]；
风险值c5=[]；
var c6=[]；
var initiate=function（）{//触发程序的按钮
var timer=setInterval（function（）{clock（）}，90）；//复制此块以供参考。
功能时钟（）{
i+=1；
var a=Math.round（Math.random（）*200）；
var b=Math.round（Math.random（）*250）；
var c=Math.round（Math.random（）*200）；
var d=Math.round（Math.random（）*250）；
var e=Math.round（Math.random（）*200）；
var f=Math.round（Math.random（）*250）；
c1.推动（a）；
c2.推动（b）；
c3.推（c）；
c4.推动（d）；
c5.推动（e）；
c6.推力（f）；
//文件.编写（i）；
var c=document.getElementById（“游乐场”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（c3[i-2]，c4[i-2]）；
ctx.BezierrCurveto（c1[i-2]，c2[i-2]，c5[i-2]，c6[i-2]，c3[i-1]，c4[i-1]）；
//ctx.lineTo（c3[i-1]，c4[i-1]）；
如果（a在reset（）
中设置一个变量，例如stop=true；
然后在faceTimer
或其他任何地方检查它
但总体结构应该是这样的
///Globals
var queue = [], stop = false;
// drawing function ....
function draw(){
if(stop || !Boolean(queue) || !Boolean(queue.length)) return;
var current = undefined;
while(Boolean(current = queue.pop()))
{
if(!stop){
current();
var nextTime = Number(current.nextInterval);
if(nextTime > 0) setTimeout(nextTime , draw || this);
}
else if(Boolean(current.shouldBreak)) break;
}
}
其中，current
是排队从faceTimer进行绘图的函数
e、 g
var work=function（）{clock（）；faceAnim（）；queue.push（this）；}；work.nextInterval=500；work.shouldBreak=false；queue.push（work）；
然后initiate变为var initiate=work；initiate（）；
我有你的示例可以使用@请格式化你的代码以便于阅读；另外，我不理解这个问题。你遇到的具体问题是什么？简而言之，我想停止initiate（）函数在onmouseout事件上运行。我如何实现这一点？我知道return关键字是终止函数的一种方法return
将使您在函数执行时退出该函数，但使用其他函数return initiate（）
不会做这样的事。好吧，我现在要去上课了，我会在几个小时后调整并报告。niceone jay！对不起，离开电脑24小时了，gunna现在就给代码打补丁。heya jay很感激这些提示，我可能会在项目完成后重新编码，但我还是一个新手。在facetimer（）中查看你的意思是：'var reset（）{var stop=true；}；var faceanim（）{co ords..if（stop==true）{return；}；}；'本质上是的，为什么不在JSFIDLE上上传一些东西，我会帮你？好的，jay，我会的！现在将链接到jsFid