运行文本：暂停、停止

Question

我有<p> 元素：

<p id="news_title">Text goes here</p>

我在此 JavaScript 的帮助下运行文本：

(function(){
var j = 0;
var el = document.getElementById("news_title");
var interval;
function runEngine(){
    interval = setInterval(function(){
        if (j===200){
            j=-200;
        }
        el.style.left = j + "px";
        j++;
    },20);
}

window.onload = function(){
    runEngine();
};
})();

标记的脚本运行良好，但我想暂停文本 onmouseover 和 onmouseout 让它继续运行。另外，onclick我想永远停止它。

el.onmouseover = function(){
   clearInterval(interval);
};  // pausing , working nicely

el.onmouseout = function(){
    runEngine();
};  // also working

但是onclick 不起作用。即使我清除了间隔，onmouseout 处理程序也会导致文本再次运行。我怎样才能防止这种情况发生？

Answer 1

点击时，设置一个标志。然后检查onmouseout处理程序中的标志：

var clicked = false;

el.onclick = function() {
    clicked = true;
};

el.onmouseout = function() {
    if (!clicked) {
        runEngine();
    }
};