点击时似乎没有触发

拥有我所想象的可能是一个简单的问题。尽管我在点击"切换"功能中设置了警报，但它们永远不会出现。我想问题出在添加事件处理程序上，但我真的不知道。任何想法都将不胜感激！非常感谢。

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

你可以试试这个

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，它是toggle函数中的event对象

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

示例。

调用addEventListener时，应删除on前缀。所以只有click。

此外，为了支持使用attachEvent的浏览器，请尝试以下操作：

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

相关内容

最新更新

热门标签：