Question

我刚开始学习javascript。我想知道在你做另一个动作之前如何保留一个功能。例如：

当您点击div之外的其他地方时，只完成onclick功能。
保持onmouseover直到你将鼠标悬停在其他div上或点击div之外。

我可能不会清楚地解释自己，对此我很抱歉。正如我所说，我刚刚开始使用JS。使用jQuery可能更容易，但我的目标是学习JavaScript语法。

提前致谢。

编辑：感谢所有帮助过的人，发布的所有内容都让我更好地理解了JavaScript。非常感谢。

Answer 1

你没有正确地考虑这些事件。当它们被触发时，事件总是触发。你不希望改变，否则你将开始得到其他问题。您无需尝试更改事件触发方式，而是需要重新考虑代码设计。

当你点击div之外的其他地方时，只完成onclick功能。

这里有代码，在你点击某处之前你不想要调用它。您应该将其移动到onclick处理程序中，以处理其他元素，例如body。

保持onmouseover直到你将鼠标悬停在其他div上或点击div之外。

同样的交易。不要试图强制onmouseout发生，而是将代码从那里移到另一个元素的onmouseover或onclick处理程序中。

Answer 2

您可以拥有一个在鼠标悬停事件中更新的变量，但在事件停止时不会更改，然后您可以在间隔循环中不断检查变量的状态，例如

var id;
document.getElementByID("hoverMe1").mouseover(function(){
    id = "hoverMe1";
});
document.getElementByID("hoverMe2").mouseover(function(){
    id = "hoverMe2";
});
setInterval(function(){
    switch (id){
        case "hoverMe1":
            /*whatever your function is for hoverMe1*/
            break;
        case "hoverMe2":
            /*whatever your function is for hoverMe2*/
            break;
        default:
            /*nothing has been moused-over yet*/
            break;
    }
}, 1);

基本上，变量由事件监听器设置，然后每毫秒不断检查其状态（因此所有效果都会非常瞬间）。这意味着，一旦＆＃39; hoverMe1＆＃39;已被淹没，它将继续应用您想要的任何更改，直到＆＃39; hoverMe2＆＃39;是moused-over，这完成了阻止onmouseout的目的，我认为这是不可能的。

当然，您可以为任何事件监听器和任意多个元素执行此操作。

Answer 3

Working demo做你所问的事。

这会在执行操作时更新视图。相反，可以使用setInterval()更新视图，以便不断检查，但这可能会导致速度减慢。

HTML

<button id="start-exploding">Start Exploding</button>
<button id="stop-exploding">Stop Exploding</button>
<div id="start-fire">Mouseover to start a fire</div>
<button id="stop-fire">Put fire out</button>

<div id="explosions">Boom</div>
<div id="fire">I'm burning!</div>

JS

var explosions=false;
var fire=false;
function updateView(){
    var ex = document.getElementById('explosions');
    var fi = document.getElementById('fire');
    if (explosions) ex.style.display = 'block'
    else ex.style.display = 'none'
    if (fire) fi.style.display = 'block'
    else fi.style.display = 'none'
}

document.getElementById('start-exploding').addEventListener('click', function(){
    explosions = true;
    updateView();
});
document.getElementById('stop-exploding').addEventListener('click', function(){
    explosions = false;
    updateView();
});
document.getElementById('start-fire').addEventListener('mouseover', function(){
    fire = true;
    updateView();
});
document.getElementById('stop-fire').addEventListener('click', function(){
    fire = false;
    updateView();
});

Answer 4

为了简单地保留您不需要复杂计时器或功能的效果，您只需要知道要处理哪个事件。例如，mouseenter事件仅在鼠标进入元素时才会触发 - 即使在鼠标离开后，处理程序中的任何操作都会持续存在。

想象一下，你有2个div：

<div id="div1" >Div 1: Hover to change color to blue</div>
<div id="div2" >Div 2: Click to change Div1 color to Red </div>

当鼠标悬停在DIV1上时，你想要改变颜色。但是只有在单击第二个DIV时才想要将其更改回来。

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");

div1.onmouseenter = function() {
    this.style.backgroundColor = 'Blue'
}

div2.onclick = function () {
    div1.style.backgroundColor = 'Red'
}

这是一个小型演示：http://jsfiddle.net/ygalanter/MSg8k/

如何保持onmouseover功能，直到鼠标悬停在其他东西上

4 个答案: