How do I call the mouse over event after click event on same function in javascript

Question

I need to calling mouse over event after mouse click in JavaScript not jQuery and main thing is that the function is only same after clicking same functions event will be change and its new event is mouse over is it possible?

<a href="javascript:void(0);" id="digit" 
   onClick="javascript:return swapClass(val,val2);" 
   class="GetDivCount" onMouseOver="javascript:return swapClass(val,val2);">

Ok so what need here call first swapClass() on click event then after click event same function will call the onmouseover event but remember that the function is paramertarized

If you **don't** want answers that use jQuery why is this tagged [tag:jquery]? Also not sure what AJAX has to do with any of this. — Anthony Grist, Apr 08 '13 at 10:58
first i want to add click event any and how condition then after clicking same function will event change on mouseOver — Umesh Chakor, Apr 08 '13 at 10:58
and why you tagged jquery and jquery ajax if you don't want *jquery way* ? — SachinGutte, Apr 08 '13 at 10:58
What are `val` and `val2` and where do they come from? And, while we're at it, what's the code inside the `swapClass` function? — Anthony Grist, Apr 08 '13 at 11:02
both two are function parameter i will pass it dynamically also — Umesh Chakor, Apr 08 '13 at 11:05
@AliSeyfollahi I don't think that is what the OP meant. From my understanding, he wants to wait for the click event before tracking the mouseover event — Jeff Shaver, Apr 08 '13 at 11:13

score 0 · Answer 1 · answered Apr 08 '13 at 11:24

0

If I understand correctly, you want to wait to watch for the onmouseover only after the click event occurs... To do this, you will have to get rid of inline event handlers. The below example should work. You have to distinguish if a browser can use addEventListener or not because older versions of IE don't support it.

HTML:

<a href="javascript:void(0);" id="digit" class="GetDivCount">Hi</a>

JS:

var a = document.getElementById('digit');
if (a.addEventListener) {  // Most browsers....
    a.addEventListener('click', function test() {
        // Add code to determine val and val2
        swapClass(val,val2);
        a.removeEventListener('click', test, false); // Remove click listener
        a.addEventListener('mouseover', function() { // Add mouseover listener
            swapClass(val,val2);
        }, false);
    }, false);
} else { // Older versions of IE only support attachEvent :(
    a.attachEvent('onclick', function test() {
        // Add code to determine val and val2
        swapClass(val,val2);
        a.detachEvent('onclick', test);
        a.attachEvent('onmouseover', function() {
            swapClass(val,val2);
        });
    });
}

answered Apr 08 '13 at 11:24

Jeff Shaver

3,315
18
19

actually @jeff first i remove both function on page load or not..i am not confirm tell me? – Umesh Chakor Apr 08 '13 at 11:33
@umeshchakor why would you remove functions on page load? They won't exist on page load. When the JS runs, it will add the click event listener. Then once you click, it will remove the click listener and add the mouseover listener. Maybe I am just not understanding the question – Jeff Shaver Apr 08 '13 at 11:35
but @jeff i am not getting the Hi because the digit id is code showing in the while loop?how can i get the fix digit ID? – Umesh Chakor Apr 08 '13 at 11:43
@umeshchakor What while loop? – Jeff Shaver Apr 08 '13 at 11:47
See @jeff i want this clone worked on my site http://www.wordtwist.org/html5.php?u=7152abcc630cc840ffab4fc43e9e7b1e1365433792 and my work is http://webwingtechnologies.co.in/quooq/games.php and my work is – Umesh Chakor Apr 08 '13 at 12:04

score -1 · Answer 2 · edited Apr 08 '13 at 12:31

Here are two possible solutions, with jQuery and without jQuery: JSFiddle

Without:

var control = "";
var first  = document.getElementById("first");
var second = document.getElementById("second");

first.onclick = function(){
    control = true;
    alert("clicked | doSomething Here");
}
second.onmouseover = function(){
        if(control==true){
        alert("mouseovered after click | doSomething Here");
        //if you want again click and after mouseover evenet
        //you have to put here
        //control=""; 
    }
}

With:

$("#first").on("click",function(){
    control = true;
    alert("cilcked | doSomething Here");
});

$("#second").on("mouseover",function(){
    if(control==true){
        alert("mouseovered | doSomething Here");
        //if you want again click and after mouseover evenet
        //you have to put here
        //control="";
    }
});

but @simon look my question is i want to make a clone site like this http://www.wordtwist.org/html5.php?u=6cadee0f0cee1363324e5941587c92091365435691.please check me and tell where me wrong please and my original work is http://webwingtechnologies.co.in/quooq/games.php — Umesh Chakor, Apr 08 '13 at 12:35
Sorry @umeshchakor I only edited the answer to include the code. You want to ask user1136403 who made up the JSFiddle. — Simon Adcock, Apr 08 '13 at 12:51

How do I call the mouse over event after click event on same function in javascript

2 Answers2