javascript要素body.onclickアタッチイベントsetTimeout

私はそれを外にクリックすると消えるポップアップdivを作りたいと思います。私はjQueryや何かではなく、純粋なjsが必要です。だから私はdiv要素が消えるために作る次...javascript要素body.onclickアタッチイベントsetTimeout

機能します：

function closePopUps(){ 
    if(document.getElementById('contact-details-div')) 
     document.getElementById('contact-details-div').style.display = 'none'; 
    //...same code further... 
} 
function closePopUpsBody(e){ 
    //finding current target - http://www.quirksmode.org/js/events_properties.html#target 
    var targ; 
    if (!e) var e = window.event; 
    if (e.target) targ = e.target; 
    else if (e.srcElement) targ = e.srcElement; 
    if (targ.nodeType == 3) // defeat Safari bug 
     targ = targ.parentNode; 

    //is we inside div?  
    while (targ.parentNode) { 
     //filtering "Close" button inside div 
     if (targ.className && targ.className == 'closebtn') 
      break; 
     if (targ.className && targ.className == 'contact-profile-popup') 
      break; 
     targ = targ.parentNode; 
    } 
    //if it not a div, or close button, hide all divs and remove event handler 
    if ((targ.className && targ.className == 'closebtn') 
     || !(targ.className && targ.className == 'contact-profile-popup')) { 
     if(document.getElementById('contact-details-div')) 
      document.getElementById('contact-details-div').style.display = 'none'; 
     //...some more code here... 

     document.body.onclick = null; 
    } 
}

多分このコードは醜いですが、これは...

主な問題は、とき主な問題ではありません私は身体にイベントを添付し、すぐに実行されます！すぐに消滅しても、私はそれを見ていない。

<tr onclick=" 
closePopUps(); 
document.getElementById('contact-details-div').style.display='block'; 
document.body.onclick = closePopUpsBody; 
return false;">

ただし、かっこは使用しないと実行されません。

document.body.onclick = closePopUpsBody(); //this executes 
document.body.onclick = function(){closePopUpsBody()}; //this is not 
document.body.onclick = closePopUpsBody; //this is not

は最終的に私は、この決定

<tr onclick=" 
closePopUps(); 
document.getElementById('contact-details-div').style.display='block'; 
setTimeout('document.body.onclick = closePopUpsBody;', 500); 
return false;">

で終わったが、私は、これは狂気だと思います。そう、私は何を間違っているの？

出典

2010-11-24 llamerr

ライブサンプルへのリンクを提供することはできますか？ 'document.body.onclick = closePopUpsBody'は期待通りに動作するはずです。 –

'document.body.onclick = closePopUpsBody'をクリックすると、正確に何が起こっていますか？何かエラーが出ますか？ –

お返事ありがとうございました、あなたはすべて正しかったです - tr inline onclickコードでstopPropagationがない場合の問題 – llamerr

イベントのバブリングを停止する必要があります。 シンプル[demo]

var box = document.getElementById('box'); 
var close = document.getElementById('close'); 

// click on a box does nothing 
box.onclick = function (e) { 
    e = e || window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) 
    e.stopPropagation(); 
} 

// click everywhere else closes the box 
function close_box() { 
    if (box) box.style.display = "none"; 
} 

close.onclick = document.onclick = close_box;

出典

2010-11-24 14:11:02 galambalazs

ここでのあなたはそれを達成できるかの完全な例。

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 
    <style> 
     body { font-family: Tahoma; font-size: 1.1em; background: #666666; color: White; } 
     #layer01 { border: 1px solid black; width: 200px; height: 100px; position: absolute; 
        top: 100px; left: 100px; background: white; padding: 10px; color: Black; 
        display: block; } 
    </style> 
</head> 
<body> 
    Click anywhere outside the layer to hide it. 

    <div id="layer01"> Test Layer </div> 

    <script type="text/javascript"> 
     isIE = (window.ActiveXObject) ? true : false; 

     document.onclick = function (e) { 
      var l = document.getElementById("layer01"); 

      if (!isIE && e.originalTarget == l) 
       e.stopPropagation(); 
      else if (isIE && event.srcElement == l) 
       event.cancelBubble = true; 
      else 
       l.style.display = "none"; 
     } 

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

出典

2010-11-24 14:11:55

通常、イベントは親に伝播されます。 <div>をクリックすると、<body>にもonClickが呼び出されます。

最初のことは、呼び出された関数の順序をデバッグしてください：window.dump("I am called!")種類のものをハンドラに配置します。

コードのどこかでevent.stopPropagation()に電話する必要があるとします。括弧質問について

（https://developer.mozilla.org/en/DOM/eventを参照してください）：あなたはのonclickプロパティに割り当てられる値を返すために）（関数closePopUpsBodyを呼び出しているので、

document.body.onclick = closePopUpsBody;//this is not 
document.body.onclick = closePopUpsBody();//this executes

これは、実行されます。 JavaScriptでは、関数名は関数オブジェクト（他の変数と同じ）を表します。変数名の後にカッコを置くと、「関数として私のために実行する」と言うことができます。

出典

2010-11-24 14:15:43 Arsen7

javascript要素body.onclickアタッチイベントsetTimeout

答えて

関連する問題