JavaScript set z-index on click

问题

I made a website which consists of a display area that randomly spawns 50 circular <div> elements. 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. Thank you.

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

回答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. (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);

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

回答2:

The problem is with the current line

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

That is trying to execute the bringToFront function right away. AddEventListener just needs to function, and it will execute it when the event fires

circle.addEventListener("click", bringToFront);

来源：https://stackoverflow.com/questions/40010865/javascript-set-z-index-on-click

标签

javascript

html

onclick

z-index