javascript中的事件处理程序

Question

I have this snippet, What I want to do is when you onclick the div it will not be affected by the mouseover and mouseout.. thank you very much for all your help..

<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

You could do something like this:

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

However, using global variable is a bad practice. If you understand the concept of closure, you can use something like this instead :

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

Using this, the div and isClicked variables won't be in conflicted with other variable that could have the same name later in your code.

Answer 2

设置全局标记，当您执行on click事件时将其设置为1.在鼠标输出事件测试中查看标志是否为1.如果是，则不要更改背景颜色。

Answer 3

You can't achieve this with events added to the tag of the element. Here is a jsfiddle which works as you want:

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 4

If you want the onMouseOver and onMouseOut events to be completely disabled, you can also remove the event handlers from them by adding only two lines of code.

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