似乎不會觸發

有我想象的可能是一個簡單的問題。儘管我在點擊「切換」功能時設置了警報，但它們從未出現。我認爲添加事件處理程序有點麻煩，但我真的不知道。任何想法將不勝感激！非常感謝。似乎不會觸發

的index.html：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Men With Arms</title> 
     <!--<link rel="stylesheet" type="text/css" href="style.css" />--> 
     <script type="text/javascript" src="scripts.js"></script> 
     <style type="text/css"> 
      body { margin: 0; padding: 0; background-color: #111; color: #FFF; text-align: center; font-family: "Helvetica Neue Light", Helvetica, sans-serif; } 
      #yall { position: absolute; width: 100%; height: 100%; } 
      #content { position: absolute; margin: -225px 0 0 -400px; padding: 0.15em; top: 50%; left: 50%; background-color: #FFF; } 
      #front { margin: 0; padding: 0; width: 800px; height: 451px; background-color: #000; } 
      #lloyd, #dad, #martha { width: 800px; height: 451px; display: none; border: 0; } 
      h1 { margin: 0; padding: 0.25em 0 0 0; } 
      ul { list-style-type: none; margin: 0; padding: 0.5em 0 0 0; } 
      li { padding: 0 0 0 0.5em; display: inline; } 
      a:link, a:active, a:visited { color: #FFF; text-decoration: none; } 
      a:hover { color: #FFF; text-decoration: none; border-bottom: 1px solid #FFF; } 
      .bottom { position: absolute; left: 40.5%; bottom: .75em; font-size: 11px; padding: 5em 0 0 0; } 
      .ltr { unicode-bidi: bidi-override; direction: rtl; } 
      /*@font-face { font-family: "Helvetica Neue Light"; src: url('/font/HelveticaNeueDeskUI.ttc'); font-weight: 200; }*/ 
     </style> 
    </head> 
    <body> 
     <div id="yall"> 
      <div id="content"> 
       <div id="front"> 
         <h1>MEN WITH ARMS</h1> 
         <ul id="menu"> 
          <li><a href="#">LLOYD</a></li> 
          <li><a href="#">DAD</a></li> 
          <li><a href="#">MARTHA</a></li> 
         </ul> 
         <span class="bottom">&copy; mothers favorite pictures 2012<br /> 
          <span class="ltr">moc.smrahtiwnem&#64;mom</span> 
         </span> 
       </div> 
       <iframe id="lloyd" src="http://player.vimeo.com/video/28292168?title=0&amp;byline=0&amp;portrait=0&amp;color=e813c8"></iframe> 
       <iframe id="dad" src="http://player.vimeo.com/video/28253343?title=0&amp;byline=0&amp;portrait=0&amp;color=e813c8"></iframe> 
       <iframe id="martha" src="http://player.vimeo.com/video/28388076?title=0&amp;byline=0&amp;portrait=0&amp;color=FF7788"></iframe> 
      </div> 
     </div> 
    </body> 
</html>

scripts.js中：

function toggle(e) { 
    alert('click!'); 
    alert(get_source_element(e).tagName); 
    if (get_source_element(e).tagName=='a') { 
     document.getElementById(get_source_element(e).innerHTML.toLowercase()).style.display='block'; 
     document.getElementById('front').style.display='none'; 
     return false; 
    } 
    else { 
     alert('hide!'); 
     var frames = document.getElementById('content').getElementsByTagName('iframe'); 
     for (i = 0; i < frames.length; i++) { 
      frames[i].style.display='none'; 
     } 
     document.getElementById('front').style.display='block'; 
    } 
} 
// return event source 
function get_source_element(e) { 
    var targ; 
    if (!e) 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; 
    return targ; 
} 
function load() { 
    document.getElementById('yall').addEventListener('onclick', toggle, false); 
    document.getElementById('content').addEventListener('onclick', toggle, false); 
    var as = document.getElementById('menu').getElementsByTagName('a'); 
    for (i = 0; i < as.length; i++) { 
     as[i].addEventListener('onclick', toggle, false); 
    } 
} 
document.addEventListener('DOMContentLoaded', load, false);

來源

2012-09-12 user

當調用addEventListener，你應該放下on前綴。所以只需click。

此外，允許使用attachEvent瀏覽器的支持，試試這個：

var elem = document.getElementById('yall'); 
(elem.attachEvent || elem.addEventListener)('click',toggle,false);

來源

2012-09-12 01:45:04

你可以試試這個

document.addEventListener('DOMContentLoaded', load, false);

或

window.onload=load; // onload will work in all browsers so use this

負載功能

function load() 
{ 
    var yall=document.getElementById('yall'); 
    addEvent(yall, 'click', toggle, false); 
    var content=document.getElementById('content'); 
    addEvent(content, 'click', toggle, false); 
    var as = document.getElementById('menu').getElementsByTagName('a'); 
    for (i = 0; i < as.length; i++) { 
     (function(n){ 
      addEvent(as[n], 'click', toggle, false); 
     })(i) 
    } 
}

的addEvent功能既addEventListener和attachEvent

function addEvent(el, event, func, bubble) 
{ 
    if(el.addEventListener) el.addEventListener(event, func, bubble) 
    el.attachEvent('on'+event, function(){ func.call(el) }, bubble); 
}

工作還要注意e那就是event對象在toggle功能

function toggle(e) 
{ 
    e=e||window.event; // if you need event object, that's e 
    alert(e.type+' occured on'+this.innerHTML); 
}

An Example。

來源

2012-09-12 02:04:39

似乎不會觸發

回答

相關問題