JavaScript 在点击时设置 z-index

Question

JavaScript 在点击时设置 z-index

pos*_*lum 3 html javascript z-index onclick

我制作了一个网站，其中包含一个随机生成 50 个圆形<div>元素的显示区域。我想让当点击其中一个圆圈时，它会出现在前景中。我认为在创建的每个圆圈上使用 addEventListener 函数会起作用，但我无法让它做任何事情。谢谢你。

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="index_styling.css">
    <script type="text/javascript" src="index_scripts.js"></script>
</head>
<header>
    <h1>First Last, Assignment #6</h1>
</header>
<div id="orange_strip"></div>
<body>
    <form>
        <ul>
            <li>
                <input type="button" name="add" value="Add Square">
                <input type="button" name="change" value="Change All Square Colors">
                <input type="button" name="reset" value="Reset All Squares">
            </li>
        </ul>
        <div id="display">

        </div>
    </form> 
</body>
<footer>
    <div id="copyright">Copyright &copy 2016 - First Mid Last</div>
</footer>
</html>

Run Code Online (Sandbox Code Playgroud)

JavaScript

window.onload = function() {
    for (var i = 0; i < 50; i++) {
        var display_div = document.getElementById("display");
        var circle = document.createElement("div");
        var randNum = getRandomDimension(5000);
        circle.setAttribute("class", "circle");
        circle.style.backgroundColor = getRandomColor();
        circle.style.position = "absolute";
        circle.style.left = getRandomDimension(550);
        circle.style.top = getRandomDimension(450);
        circle.addEventListener("click", bringToFront(circle));
        display.appendChild(circle);
    }
}

function bringToFront(element) {
    element.style.zIndex = "1";
}

function getRandomColor() {
    var letters = "0123456789abcdef";
    var result = "#";

    for (var i = 0; i < 6; i++) {
        result += letters.charAt(parseInt(Math.random() * letters.length));
    }

    return result;
}

function getRandomDimension(max) {
    var num = Math.floor((Math.random() * max) + 1);
    var str = num.toString();
    return str += "px";
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

nnn*_*nnn 6

This line:

circle.addEventListener("click", bringToFront(circle));

Run Code Online (Sandbox Code Playgroud)

...does not add an event listener. It calls your bringToFront() method immediately and then attempts to assign its return value as a listener except the return value is undefined. (Meanwhile, the effect of calling that function immediately within the loop means all of your divs get set to z-index: 1 upon their creation.)

You should be passing a reference to the function (note there is no () after the function name):

circle.addEventListener("click", bringToFront);

Run Code Online (Sandbox Code Playgroud)

...and then change the function to work with this, because this will automatically be set to the clicked element at the time the function is called for the event:

function bringToFront() {
    this.style.zIndex = "1";
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，8 月前
查看次数：	17008 次
最近记录：	9 年，8 月前