event handler in 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>

Scalpweb · Accepted Answer · 2013-09-13 07:27:36Z

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.

Krasimir · Accepted Answer · 2013-09-13 07:21:58Z

1

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>

answered Sep 13, 2013 at 7:21

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

3 Comments

Scalpweb Over a year ago

You should set the isClicked variable to false when the mouse leaves the div, to ensure the event can be fired up again if the mouse comes over again later. See my solution for example.

Krasimir Over a year ago

@Scalpweb: it depends. Maybe that's not the case and the OP wants to disable the over/out style changing completely.

Scalpweb Over a year ago

True. But he says "when you onclick the div it will not be affected by the mouseover". So I would imagine he doesn't want to de-activated completely the event. And also, you should also use a self-invokating method to use a closure and avoid global var conflict.

BenM · Accepted Answer · 2013-09-13 07:21:33Z

1

Set a global flag up and when you do your on click event set it to 1. In your mouse out event test to see if flag is 1. If it is then don't change the background colour.

answered Sep 13, 2013 at 7:21

BenM

4,2682 gold badges34 silver badges58 bronze badges

Comments

Butt4cak3 · Accepted Answer · 2013-09-13 08:14:53Z

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>

Collectives™ on Stack Overflow

event handler in javascript

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related