Remove onmouseover event from DOM elements efficiently

Question

I have an HTML page that contains many onmouseover events. These events are linked to a,img,td and div tags.

What is the most efficient Javascript way to remove all the onmouseover events, presuming the page has loaded.

I'm not using jQuery.

(the task is to remove unneeded tooltips when the page is accessed using touch devices)

Are all `onmouseover` pointing to the same central function to display tooltips? — Yuriy Galanter, Sep 16 '13 at 21:38
Yes, but I can't disable the tooltip, because it is used in some onclick events. — soupagain, Sep 16 '13 at 21:41
Have you actually verified that this requires optimization? What is the current lag time in removing the events? — Travis J, Sep 16 '13 at 21:51

score 1 · Answer 1 · answered Sep 16 '13 at 21:49

1

Since all your event handlers point to the same central function - you can disable tooltips inside of that function.

If this function handles both onmouseover and onclick events - you can check event.type and disable tooltips only if it's equal mouseover.

Demo: http://jsfiddle.net/cLHgK/1/

answered Sep 16 '13 at 21:49

Yuriy Galanter

38,833
15
69
136

Unfortunately I do need to remove the onmouseover events, as the iPhone is capturing them when trying to click on element, and processing them incorrectly. The only solution is to remove them entirely. – soupagain Sep 16 '13 at 22:00
Really? Even if your code specifically states to do nothing on mouseover and just return? Weird. – Yuriy Galanter Sep 16 '13 at 22:07

Paul Nelson · Answer 2 · 2013-09-16T22:06:09.670

A simple function looping through all the elements should do the trick. This one does it for all divs:-

function removeMouseOver() {
    var divs = document.body.getElementsByTagName('div');
    for (var i = 0; i < divs.length; i++) {
        divs[i].onmoseover = function() {};
    }
}

another way is to define the mouseover tooltip function as a var

var tooltip = function(){// put your tooltip code here };
var donothing = function(){};

//to turn tooltips on:-
onmouseoverfunc = tooltip;

//to turn tooltips off:-
onmouseoverfunc = donothing;

in the elements

document.getElementById('mydiv').onmouseover = function(){mouseoverfunc();};

Your answer is the most complete, but the other answer is the one that I used! — soupagain, Sep 17 '13 at 13:37

score 1 · Accepted Answer · answered Sep 16 '13 at 22:05

1

Just add a unique class to everything that has the mouseover event and then make a loop

get=document.getElementsByClassName("classhere");
for(i=0; i<get.length; i++){
    get[i].removeEventListener("mouseover", yourFunction, false);
   }

replace yourFunction and classhere, tell me if it works or not

answered Sep 16 '13 at 22:05

y0ruba

224
1
2
9

This solution is quick and efficient. Thanks. – soupagain Sep 17 '13 at 13:37

Remove onmouseover event from DOM elements efficiently

3 Answers3