事件监听器问题

Question

我想做一个简单的博客一样的网站，用于练习，边上有一个可以隐藏或显示的菜单。我试图在一个外部的Javascript文件中使用本地Javascript来实现这个功能，但我的问题是，我的事件在网站加载时就被触发，或者它们没有被触发。我的问题是，我的事件在网站加载时就被触发，或者根本没有被触发。我确信我犯了一些初学者的错误。下面是我的代码。

Javascript:

var shower = document.getElementById('showmenu');
var hider = document.getElementById('site');

function hideshow() {

shower.onclick = function() {
    document.getElementById('site').style.width="84%";
    document.getElementById('menu').style.display="block";
    document.getElementById('showmenu').style.display="none";
}

hider.onclick = function() {
    document.getElementById('menu').style.display="none";
    document.getElementById('site').style.width="100%";
    document.getElementById('showmenu').style.display="block";
}
 }


 window.onload = function() {

hideshow();

 }

HTML：

<!doctype html>
<meta charset="utf-8">

<html>
<head>
 <title> Javascript Menu Test 2.0</title>

 <link rel="stylesheet" type="text/css" href="style.css">



</head>
<body>

<div id="wrapper">
    <div id="menu">
        <aside>
            <ul>
                <li><input type="text"></li>
                <li>Vel Purus</li>
                <li>Dolor Sit</li>
                <li>Lorem Ipsum</li>
            </ul>
        </aside>
    </div>
    <div id="site">
        <div id="bannerImage">
            <input type="button" value="M" id="showmenu">
            <img src="banner.jpg">
        </div>
        <div id="article">

            <h1> Header</h1>

                                  <!--text goes here-->

            </div>
        </div>
    </div>
</div>

    <script type="text/javascript" src="menuhider.js"></script>

</body>
</html>

CSS:

        html,body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    ul {
        margin: 0;
        padding: 0; 
    }

        #wrapper {
            height: 100%;
            height: 100%;
        }

            #menu {
                display: none;
                position: fixed;
                height: 100%;
                width: 16%;
                background-color: #131313;
                float: left;
                color: white;
                font-family: 'arial', sans-serif;
            }

                #menu li {
                    margin-top: 8%;
                    margin-left: 1%;
                    padding-top: 1%;
                    padding-bottom: 1%;
                }

                    #menu li:hover {
                        cursor: pointer;
                        background-color: #424242;
                    }

                    #menu input {
                        border: none;
                        outline: none;
                    }

            #site {
                height: 100%;
                width: 100%;
                background-color: white;
                float: right;
            }

                #site img {
                    position: relative;
                    z-index: 0;
                    width: 100%;
                    height: 10%;    
                }

                #showmenu {
                    position: absolute;
                    position: fixed;
                    z-index: 1;
                    border: none;
                    width: 5%;
                    height: 5%;
                    margin-left: 1%;
                    background-color: #131313;
                    color: white;
                    outline: none;
                }

                    #showmenu:hover {
                        cursor: pointer;
                        background-color:  #424242;
                    }

            #text {
                width: 85%;
                margin-left: 5%;
                font-size: 1.2em;
            }

Answer 1

当scrpt包含在底部时，没有理由使用window.onload。去掉它，只需包含函数即可。

另一个问题是你有两个嵌套的点击事件。

所以它们都会被触发。你需要取消内部的点击，这样它就不会传播到父节点。

(function(){

    var shower = document.getElementById('showmenu');
    var hider = document.getElementById('site');

    hider.onclick = function() {
        document.getElementById('menu').style.display="none";
        document.getElementById('site').style.width="100%";
        document.getElementById('showmenu').style.display="block";
    }

    shower.onclick = function (e) {
        document.getElementById('site').style.width="84%";
        document.getElementById('menu').style.display="block";
        document.getElementById('showmenu').style.display="none";

        if (!e) {
          e = window.event;
        }

        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
        return false;
    }

})();

事件监听器问题

问题描述投票：0回答：1

1个回答

最新问题

事件监听器问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1