onmouseover 및 onmouseout 이벤트로 부모 함수 호출 및 종료

onmouseover = "ParentFunction();에 함수를 호출하고 싶습니다. 다음 그것을 죽일 onmouseout = "killParent();".onmouseover 및 onmouseout 이벤트로 부모 함수 호출 및 종료

참고 : 내 코드에서 상위 함수의 이름은 initiate()입니다. killer 함수는 reset()이라고 불립니다. 스크립트 맨 아래 부모 함수 바깥쪽에 있습니다. 나는 intitiate을 죽일 방법을 모르는

는() 내 첫번째 추측이었다 기능 :

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>

출처

2014-06-12 Zoolu

@ 일하고있다; 또한 나는 그 질문을 이해하지 못한다. 특정 문제는 무엇입니까? – Mathletics

간단히 말해서 onmouseout 이벤트에서 initiate() 함수가 실행되는 것을 중지하고 싶습니다. 나는 이것을 어떻게 성취합니까? 나는 return 키워드가 함수를 죽이는 방법 중 하나라는 것을 알고있다. – Zoolu

'return'은 당신이 함수의 실행 중에 함수를 빠져 나올 것이지만'return initiate()'는 그런 일을하지 않을 것이다. – Mathletics

예 : reset()에 변수를 설정합니다. stop = true;

,이어서 faceTimer 그것을 선택하거나 어디든 다른 ...

전반적인 구조는 비록이 있어야

current가 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; 
} 
}

예 :

var work = function(){ clock(); faceAnim(); queue.push(this); }; work.nextInterval = 500; work.shouldBreak = false; queue.push(work);

그리고 시작은 var initiate = work; initiate();된다;

나는 당신의 예를 쉽게 읽을 수 있도록 코드를 포맷하십시오 http://jsfiddle.net/JtHQ4/18/

출처

2014-06-12 15:20:53 Jay

오키, 지금 수업에 가야겠다. 나는 몇 시간 안에 조정하고 다시보고 할 것이다. niceone jay! – Zoolu

문제 없으므로 upvote하십시오! – Jay

나는 이것에 찬성표를 얻을 수 있습니까? – Jay

onmouseover 및 onmouseout 이벤트로 부모 함수 호출 및 종료

답변

관련 문제