Question

我尝试定期更改元素子元素的焦点。这EXAMPLE

<div id="test">
    <p>This is a test</p>
    <p>another test</p>
    <p>Thirs test</p>
</div>

和CSS

#test p {
    color:blue
}
#test p:active, #test p:focus {
    color:red;
}

和JavaScript

function test() {
    var el = document.getElementById("test"),
        nodes = el.getElementsByTagName("p"),
        j = nodes.length - 1,i=0;
    var id = setInterval(
    function () {
        nodes[i].focus();
        if (i == j) {
            i = 0;
        } else {
            i++;
        }
    }, 1000);
};
test();

但是这个简单的例子不起作用。该问题与nodes[i].focus();相关联，因为nodes[i].style.color='red';有效。

我知道这种做法并不完美，我很感激任何改善这一事件的评论。

Answer 1

问题是默认情况下段落不可聚焦，通过点击触发活动状态，但它不是焦点事件。为了使它工作，你只需要使这些段落可以集中：

<div id="test">
<p tabindex=0>This is a test</p>
<p tabindex=0>another test</p>
<p tabindex=0>Thirs test</p>

然后你可能想要在某个时刻清除间隔，或者更好的是，使用setTimeout（除非你希望它永远运行......）但这是一个不同的问题。这是一个包含您确切代码的演示，但具有可关注的p：

http://jsfiddle.net/WvLAx/3/

Answer 2

使用此代码解决您的问题

var myInterval;
var interval_delay = 500;
var is_interval_running = false; //Optional

$(document).ready(function () {
    $(window).focus(function () {
        clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet
        if  (!is_interval_running) //Optional
            myInterval = setInterval(interval_function, interval_delay);
    }).blur(function () {
        clearInterval(myInterval); // Clearing interval on window blur
        is_interval_running = false; //Optional
    });
});

interval_function = function () {
     is_interval_running = true; //Optional
     // Code running while window is in focus
}

在setInterval中使用focus（）

2 个答案: