событий в JavaScript

Question

У меня есть этот фрагмент кода, что я хочу сделать, это когда вы OnClick в DIV не будет зависеть от наведении курсора и MouseOut .. Большое спасибо за вашу помощь ..

<div id="div" onmouseover="over_div()" onmouseout="out_div()" onclick="click_div()" style="width:100px; height:100px; border:2px solid black"></div> 
<script> 
function click_div(){ 
    document.getElementById("div").style.backgroundColor="red"; 
    } 

function over_div(){ 
    document.getElementById("div").style.backgroundColor="green"; 
    } 

function out_div(){ 
    document.getElementById("div").style.backgroundColor="white"; 
    } 
</script> 

Answer 1

Вы не можете достичь этого с помощью событий, добавленных в тег элемента. Вот jsfiddle, который работает, как вы хотите:

http://jsfiddle.net/krasimir/Ru5E5/

Javascript:

var element = document.getElementById("div"); 
var isClicked = false; 
element.addEventListener("click", function() { 
    isClicked = true; 
    element.style.backgroundColor="red"; 
}); 
element.addEventListener("mouseover", function() { 
    if(isClicked) return; 
    element.style.backgroundColor="green"; 
}); 
element.addEventListener("mouseout", function() { 
    if(isClicked) return; 
    element.style.backgroundColor="white"; 
}); 

HTML

<div id="div" style="width:100px; height:100px; border:2px solid black"></div> 

Answer 2

Вы могли бы сделать что-то вроде этого:

<div id="div" onmouseover="over_div()" onmouseout="out_div()" onclick="click_div()" style="width:100px; height:100px; border:2px solid black"></div> 
<script type="text/javascript"> 
var isClicked = false; 
function click_div(){ 
    isClicked = true; 
    document.getElementById("div").style.backgroundColor="red"; 
    } 

function over_div(){ 
    if(!isClicked) 
     document.getElementById("div").style.backgroundColor="green"; 
    } 

function out_div(){ 
    if(!isClicked) 
     document.getElementById("div").style.backgroundColor="white"; 
    isClicked = false; 
    } 
</script> 

Однако использование глобальной переменной является плохой практикой. Если вы понимаете концепцию закрытия, вы можете использовать что-то вроде этого, вместо:

<div id="div" style="width:100px; height:100px; border:2px solid black"></div> 
<script type="text/javascript"> 
(function() 
{ 
    var div = document.getElementById("div"); 
    var isClicked = false; 
    div.addEventListener("click", function() { 
     div.style.backgroundColor = "red"; 
     isClicked = true; 
    }); 
    div.addEventListener("mouseover", function() { 
     if(!isClicked) 
      div.style.backgroundColor = "green"; 
    }); 
    div .addEventListener("mouseout", function() { 
     if(!isClicked) 
      div.style.backgroundColor = "white"; 
     isClicked = false; 
    }); 
} 
)(); 
</script> 

Используя это, div и isClicked переменные не будут находиться в противоречии с другой переменной, которая может иметь такое же имя в коде ,

Answer 3

Установите глобальный флаг, и когда вы делаете свое событие по щелчку, установите его в 1. В тестовом режиме мыши вы увидите, равен ли флаг 1. Если это не изменит цвет фона.

Answer 4

Если вы хотите OnMouseOver и onMouseOut событий, чтобы быть полностью отключена, вам также могут удалить обработчики событий из них, добавив только две строки кода.

<div id="div" onmouseover="over_div()" onmouseout="out_div()" onclick="click_div()" style="width:100px; height:100px; border:2px solid black"></div> 
<script> 
function click_div(){ 
    document.getElementById("div").style.backgroundColor="red"; 
    // Disable the other two events 
    document.getElementById("div").onmouseover=null; 
    document.getElementById("div").onmouseout=null; 
} 

function over_div(){ 
    document.getElementById("div").style.backgroundColor="green"; 
} 

function out_div(){ 
    document.getElementById("div").style.backgroundColor="white"; 
} 
</script>