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()方法，然后尝试将其返回值指定为侦听器，但返回值为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

2 个答案: