javascript element body.onclick attatch event setTimeout

我想讓彈出式div在我點擊它之外時消失。我需要純粹的js，而不是jQuery或其他東西。所以我下面......javascript element body.onclick attatch event setTimeout

功能，使股利dissapear：

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

也許這段代碼是醜陋的，但是這不是一個主要的問題......

主要問題是，當我附加一個事件到身體，它立即執行！和div立即消失，我甚至沒有看到它。

<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

你可以給一個現場的例子，甚至更好，一個jsfiddle的鏈接？ `document.body.onclick = closePopUpsBody`應該按預期工作。 – 2010-11-24 14:02:25

您應該停止事件冒泡。 簡單[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）

關於括號的問題：

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

此執行，因爲你調用一個函數closePopUpsBody（）返回將被分配到的onclick屬性的值。在JavaScript中，函數名稱代表函數對象（與任何其他變量一樣）。如果你在變量名後加括號，那麼你會說：'爲我執行它，作爲一個函數。

來源

2010-11-24 14:15:43 Arsen7

javascript element body.onclick attatch event setTimeout

回答

相關問題