Как сохранить функцию onmouseover, пока не наведете мышку на что-то другое

Question

Как сохранить функцию onmouseover, пока не наведете мышку на что-то другое

0

Я только начал изучать javascript. Я хотел знать, как сохранить функцию, пока вы не выполните другое действие. Например:

Только завершение функции onclick, когда вы нажимаете где-то еще из div.
Держите onmouseover, пока не наведите указатель мыши на какой-либо другой div или нажмите вне div.

Я не могу объяснять себя четко, мне жаль. Как я уже сказал, я только начинаю с JS. Это может быть проще, используя jQuery, но моя цель здесь - изучить синтаксис JavaScript.

Заранее спасибо.

Изменение: Спасибо всем, кто помог, все, что было опубликовано, позволило мне лучше понять JavaScript. Очень признателен.

Fyxerz 23 май 2014, в 19:13

Источник

0

Похоже, вы спрашиваете о «цикле игры javascript», где один сохраняется до тех пор, пока не произойдет другая вещь, такая как keydown, затем keyup.
Nigel Angel 23 май 2014, в 16:23
0

Вы хотите сохранить эффект события? Например, div изменяет цвет при наведении курсора мыши - сохранить этот цвет, пока не нажмете другой div?
Yuriy Galanter 23 май 2014, в 16:28
0

@YuriyGalanter Это верно. это то, что я пытаюсь сделать.
Fyxerz 23 май 2014, в 16:34

Показать ещё 1 комментарий

Теги:

javascript

html

function

onclick

onmouseover

4 ответа

1

Чтобы просто сохранить эффект, вам не нужны сложные таймеры или функции, вам просто нужно знать, какое событие обрабатывать. Например, событие mouseenter срабатывает только тогда, когда мышь вводит элемент - и все, что вы делаете в обработчике, будет сохраняться даже после мыши.

Представьте, что у вас есть 2 divs:

<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/

Yuriy Galanter 23 май 2014, в 14:58

1

Вы не думаете о событиях должным образом. События всегда срабатывают, когда они должны запускаться. Вы не хотите, чтобы это изменилось, иначе вы начнете получать другие проблемы. Вместо того, чтобы пытаться изменить способ запуска событий, вам нужно переосмыслить свой код.

Только завершение функции onclick, когда вы нажимаете где-то еще из div.

Здесь у вас есть код, который вы не хотите вызывать, пока не нажмете куда-нибудь. Вы должны переместить это в обработчик onclick для другого элемента, например body.

Держите onmouseover, пока не наведите указатель мыши на какой-либо другой div или нажмите вне div.

Такая же сделка. Вместо того, чтобы пытаться заставить onmouseout происходить, переместите код оттуда в onmouseover или обработчик onclick для другого элемента.

Jeff 23 май 2014, в 14:50

1

У вас может быть переменная, которая обновляется в событии mouseover, но не изменяется при прекращении события, а затем вы можете постоянно проверять состояние переменной в цикле интервалов, например

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);

В принципе, переменная устанавливается пользователем-слушателем, а затем ее состояние будет постоянно проверяться каждые миллисекунды (так что все эффекты будут в значительной степени мгновенными). Это означает, что после того, как "hoverMe1" будет запутан, он будет продолжать применять любые изменения, которые вы хотите, до тех пор, пока "hoverMe2" не будет запущен, что завершает ту же цель, что и блокирование onmouseout, что, я думаю, не возможно,

Конечно, вы можете сделать это для любого слушателя событий и столько элементов, сколько хотите.

theonlygusti 23 май 2014, в 13:40

Ещё вопросы

Похоже, вы спрашиваете о «цикле игры javascript», где один сохраняется до тех пор, пока не произойдет другая вещь, такая как keydown, затем keyup.
Вы хотите сохранить эффект события? Например, div изменяет цвет при наведении курсора мыши - сохранить этот цвет, пока не нажмете другой div?
@YuriyGalanter Это верно. это то, что я пытаюсь сделать.

Nigel Angel · Accepted Answer · 2014-05-23T14-10-00.000Z

Рабочая демонстрация делает то, что вы просили.

Это обновляет представление при выполнении действия. Вместо этого можно обновить представление, используя 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();
});