Question

我想对每一个链接应用“焦点”效果，它很容易但不像真正的css“焦点”：

var backgroundColor, color, links = container.getElementsByTagName ("a");

for (i = 0; i < links.length; i ++) {
    links[i].onblur = function () {
        this.style.backgroundColor = backgroundColor;
        this.style.color = color;
    }

    links[i].onfocus = function () {
        backgroundColor = document.defaultView.getComputedStyle (this, null).getPropertyValue ("background-color");
        color = document.defaultView.getComputedStyle (this, null).getPropertyValue ("color");

        this.style.backgroundColor = "blue";
        this.style.color = "white";
    }
}

让我们动态添加更多链接，效果将不适用于它们，这与真正的css“焦点”不同：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">
    <head>
        <meta http-equiv = "content-type" content = "text/html; charset=utf-8" />

        <script type = "text/javascript">
            window.onload = function () {
                var container = document.getElementsByTagName ("div")[0];

                var i = 0;

                container.innerHTML = "Focus on the links, you have 10 seconds, <b>" + i + "<b>";

                for (i = 1; i <= 5; i ++) {
                    var a = document.createElement ("a");
                        a.innerHTML = i;
                        a.setAttribute ("href", "#");

                    container.appendChild (a);
                }

                i = 0;

                var interval = window.setInterval (function () {
                    i ++;

                    if (i < 10) {
                        container.childNodes[1].innerHTML = i;
                    }
                    else {
                        window.clearInterval (interval);

                        container.innerHTML = "No more effects, different links";

                        for (i = 1; i <= 10; i ++) {
                            var a = document.createElement ("a");
                                a.innerHTML = i;
                                a.setAttribute ("href", "#");

                            container.appendChild (a);
                        }
                    }
                }, 1000);

                var backgroundColor, color, links = container.getElementsByTagName ("a");

                for (i = 0; i < links.length; i ++) {
                    links[i].onblur = function () {
                        this.style.backgroundColor = backgroundColor;
                        this.style.color = color;
                    }

                    links[i].onfocus = function () {
                        backgroundColor = document.defaultView.getComputedStyle (this, null).getPropertyValue ("background-color");
                        color = document.defaultView.getComputedStyle (this, null).getPropertyValue ("color");

                        this.style.backgroundColor = "blue";
                        this.style.color = "white";
                    }
                }
            }
        </script>

        <style type = "text/css">
            a {
                border: 1px solid black;
                display: block;
                margin: 5px;
                padding: 5px;
                text-decoration: none;
            }
            */
            a:focus {
                background-color: blue;
                color: white;
            }*/
        </style>

        <title>Olá</title>
    </head>

    <body><div></div></body>
</html>

我该怎么做才能扭转它？

由于

Answer 1

您可以处理<body>标记上的事件;他们会冒泡到达那里。

jQuery将使用live method为您执行此操作。

动态链接上的“焦点”事件

1 个答案: