JavaScript 在点击时设置 z-index答案

【问题标题】：JavaScript set z-index on clickJavaScript 在点击时设置 z-index
【发布时间】：2016-10-13 09:41:24
【问题描述】：

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

【问题讨论】：

您正在调用该函数，而不是分配它

标签： javascript html onclick z-index

【解决方案1】：

这一行：

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

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

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

circle.addEventListener("click", bringToFront);

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

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

【讨论】：

谢谢！我对这个例子感到困惑，并认为我必须包含一个参数。 link

【解决方案2】：

问题出在当前行

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

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

circle.addEventListener("click", bringToFront);

【讨论】：