JavaScript 在点击时设置 z-index

Question

我制作了一个网站，其中包含一个随机生成 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>

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

Answer 1

这一行：

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

...不添加事件侦听器。它立即调用您的bringToFront() 方法，然后尝试将其return 值分配为侦听器，但return 值是undefined。（与此同时，在循环中立即调用该函数的效果意味着您的所有 div 在创建时都设置为 z-index: 1。）

您应该传递对函数的引用（注意函数名称后没有 ()）：

circle.addEventListener("click", bringToFront);

...然后更改函数以使用 this，因为 this 会在事件调用函数时自动设置为单击的元素：

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

Answer 2

当前行有问题

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

那是试图立即执行 bringToFront 函数。 AddEventListener 只需要起作用，它会在事件触发时执行它

circle.addEventListener("click", bringToFront);

JavaScript 在点击时设置 z-index

JavaScript set z-index on click

html

javascript

z-index

onclick