JavaScript在点击时设置z-index

Question

I made a website which consists of a display area that randomly spawns 50 circular <div> elements. 我制作了一个网站，其中包含一个随机显示50个圆形<div>元素的显示区域。 I want to make it so when one of the circles is clicked, it comes to the foreground. 我想做到这一点，因此当单击其中一个圆圈时，它就变成了前景。 I thought using the addEventListener function on each circle as it's created would work but I can't get it to do anything. 我以为在创建每个圈子时都可以使用addEventListener函数，但是我无法让它做任何事情。 Thank you. 谢谢。

HTML 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 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

This line: 这行：

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

...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 . 它立即调用您的bringToFront()方法，然后尝试将其返回值分配为侦听器，但返回值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.) （同时，在循环内立即调用该函数的效果意味着所有div在创建时都设置为z-index: 1 。）

You should be passing a reference to the function (note there is no () after the function name): 您应该传递对该函数的引用（注意，函数名称后没有() ）：

circle.addEventListener("click", bringToFront);

...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: ...然后更改功能一起工作this ，因为this会被自动设置为在函数调用该事件的时候点击的元素：

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

Answer 2

The problem is with the current line 问题出在当前行

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

That is trying to execute the bringToFront function right away. 那是试图立即执行BringToFront函数。 AddEventListener just needs to function, and it will execute it when the event fires AddEventListener只需运行即可，并在事件触发时执行

circle.addEventListener("click", bringToFront);

JavaScript在点击时设置z-index

问题描述

2 个解决方案

解决方案1
4 已采纳 2016-10-13 01:40:28

解决方案2
0 2016-10-13 01:41:24

JavaScript在点击时设置z-index

问题描述

2 个解决方案

解决方案1 4 已采纳 2016-10-13 01:40:28

解决方案2 0 2016-10-13 01:41:24

解决方案1
4 已采纳 2016-10-13 01:40:28

解决方案2
0 2016-10-13 01:41:24