Question

从插入到输入文本中的文本开始经过500毫秒后，我将在输入文本下打开一个div，其中包含一个div并带有插入的文本。单击插入的文本后，它应该console.log文本，但是不能这样做，因为onblur事件发生在单击之前。我想保留我的onblur事件。但是使用onblur事件，我无法使div可点击。请帮助

index.html:

var input_timeout = undefined;

        document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
            clearTimeout(input_timeout);
            var val = this.value;

            input_timeout = setTimeout(function () {
                var to_add_to = document.querySelector("#navigation div");
                to_add_to.innerHTML = "";
                to_add_to.style.visibility = "visible";
                var div_to_put = document.createElement("div");
                div_to_put.style.visibility = "visible";
                div_to_put.id = val;
                div_to_put.innerHTML += "<font>" + val + "</font";
                div_to_put.onclick = function () {
                    console.log(this.id);
                }
                to_add_to.appendChild(div_to_put);
            }, 500);
        }

        document.getElementById("navigation").querySelector("INPUT").onblur = function () {
            this.value = "";
            document.querySelector("#navigation div").style.visibility = "hidden";
            document.querySelector("#navigation div").innerHTML = "";
        }

body {
            margin: 0;
        }
        #navigation {
            min-width: 620px;
            background-color: silver;
            width: 100%;
            height: 50px;
            position: fixed;
            top: 0;
        }
        #navigation input {
            height: 30px;
            width: 200px;
            font-size: 15px;
            color: orange;
            border: 1px solid orange;
            border-radius: 5px;
            display: block;
            margin: 10px 5% 0% auto;
            padding: 0px 28px 0px 5px;
            float: right;
        }
        #navigation div {
            width: 200px;
            height: 50px;
            position: absolute;
            top: 41px;
            right: 5%;
            color: orange;
            background-color: white;
            border: 1px solid orange;
            border-radius: 5px;
            visibility: hidden;
        }
        #navigation div div {
            width: 100%;
            height: 30px;
            text-align: center;
            font-size: 25px;
            color: orange;
            border: 1px solid orange;
            border-radius: 5px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
        }

<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
</head>
<body>
    <div id="navigation">
        <input type="text" name="Search">
        <div></div>
    </div>
</body>
</html>

Answer 1

与onclick事件不同，onmousedown事件在onblur事件之前被触发：

var input_timeout = undefined;

        document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
            clearTimeout(input_timeout);
            var val = this.value;

            input_timeout = setTimeout(function () {
                var to_add_to = document.querySelector("#navigation div");
                to_add_to.innerHTML = "";
                to_add_to.style.visibility = "visible";
                var div_to_put = document.createElement("div");
                div_to_put.style.visibility = "visible";
                div_to_put.id = val;
                div_to_put.innerHTML += "<font>" + val + "</font";
                div_to_put.onmousedown = function () {
                    console.log(this.id);
                }
                to_add_to.appendChild(div_to_put);
            }, 500);
        }

        document.getElementById("navigation").querySelector("INPUT").onblur = function () {
            this.value = "";
            document.querySelector("#navigation div").style.visibility = "hidden";
            document.querySelector("#navigation div").innerHTML = "";
        }

body {
            margin: 0;
        }
        #navigation {
            min-width: 620px;
            background-color: silver;
            width: 100%;
            height: 50px;
            position: fixed;
            top: 0;
        }
        #navigation input {
            height: 30px;
            width: 200px;
            font-size: 15px;
            color: orange;
            border: 1px solid orange;
            border-radius: 5px;
            display: block;
            margin: 10px 5% 0% auto;
            padding: 0px 28px 0px 5px;
            float: right;
        }
        #navigation div {
            width: 200px;
            height: 50px;
            position: absolute;
            top: 41px;
            right: 5%;
            color: orange;
            background-color: white;
            border: 1px solid orange;
            border-radius: 5px;
            visibility: hidden;
        }
        #navigation div div {
            width: 100%;
            height: 30px;
            text-align: center;
            font-size: 25px;
            color: orange;
            border: 1px solid orange;
            border-radius: 5px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
        }

<html>
<head>
    <meta charset="utf-8" />
    <title>Page Title</title>
</head>
<body>
    <div id="navigation">
        <input type="text" name="Search">
        <div></div>
    </div>
</body>
</html>

允许在输入文本上使用“ onblur”事件点击div

1 个答案: