Open Bug 524043 Opened 11 years ago Updated 2 years ago

Onmouseover and onmouse after deletion and recreation do not work

Categories

(Core :: DOM: UI Events & Focus Handling, defect)

Product:
Core
Component:
DOM: UI Events & Focus Handling
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: ivan, Unassigned)

References

(
URL
)

Details

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; ru-ru) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; ru; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3

On web page I need to delete onmouseout and onmouseover events and then create them again. This is not working correctly in FireFox. In Additional information I've added simple html file that shows the error.

Reproducible: Always

Steps to Reproduce:
Steps to reproduce the problem are written in detail in html file
Actual Results:  
After performins the steps in html file the onmouseover and onmouseout event do not work.

Expected Results:  
I expect onmouseover and onmouseout event work.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

<head>
<title>bessarabov</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
.action {
    color: #660033;
    font-weight: bold;
    font-size: 22px;
    margin-top: 1em;
    margin-bottom: 1em;
}
.h_hidden {
    color: white;
}
.h_visible {
    color: green;
    font-size: 16px;
}
</style>

<script type="text/javascript">
function show(navID)
{
    var element = document.getElementById(navID);
    element.className = 'h_visible';
}

function hide(navID)
{
    var element = document.getElementById(navID);
    element.className = 'h_hidden';
}

function testDelete() {
     var element = document.getElementById("o");
     element.onmouseover = null;
     element.onmouseout = null;
}
function testCreate() {
     var element = document.getElementById("o");
     element.setAttribute("onmouseover","show('h')");
     element.setAttribute("onmouseout","hide('h')");
}

function buttonPrintDebug () {
        writeDebug("onmouseover: " + document.getElementById("o").onmouseover );
        writeDebug("onmouseout: " + document.getElementById("o").onmouseout );
        writeDebug("");
}

function writeDebug(text) {
    if (document.getElementById("debug")) {
        var dbgObj = document.getElementById("debug");
        dbgObj.innerHTML = dbgObj.innerHTML + text + unescape("%3Cbr/%3E");
    }
}

</script>
</head>
<body>

<h1>Is this a firefox bug?</h1>
<p>
<span id="o" class="tdtask" onmouseover="show('h')" onmouseout="hide('h')">
 <span class="action" id="a">put the mouse cursor over this text</span>
 <span class="h_hidden" id="h">this text appears only when the mouse is over the text</span>
</span>
</p>

<p>
<button onclick="  buttonPrintDebug(); ">print debug</button> &mdash; when you press this button you can see that there are onmouseover and onmouseout action on element with id="o"<br/>
<button onclick="  testDelete(); ">delete</button> &mdash; after pressing this button the onmouseover and onmouseout of the element "o" are set to null<br/>
<button onclick="  buttonPrintDebug(); ">print debug</button> &mdash; we can see that the action are set to null after pressing the debug button. And also, when we place the mouse cursor over the text nothing happen<br/>
<button onclick="  testCreate(); ">create</button> &mdash; now we are trying to create actions onmouseover and onmouseout back.<br/>
<button onclick="  buttonPrintDebug(); ">print debug</button> &mdash; this will print the actions we are talking about <br/>
</p> 

<p>The actions are restored in all browsers but not in FireFox. In FF (I'm using 3.5.3 on ubuntu) onmouseout and onmouseover can't be restored.
I've also checked in FireFox 3.5.3 on mac, the situation is just the same as in linux.
This is working fine in Opera on linux and in Safari, Opera and Chrome on mac.
</p>

<p>So, I want to understand is this a bug in Firefox or I don't understand something?</p>
<p>My email is ivan@bessarabov.ru</p>

<div id="debug">
</div>

</body>
</html>
In my script I fount the solution. I've changed:

{{{
element.onmouseover = null;
element.onmouseout = null;
}}}

to

{{{
element.setAttribute("onmouseover","");
element.setAttribute("onmouseout","");
}}}

After this change everything work fine in FireFox, but I"m still sure that setting value to null and then creating it again should also work.
Component: General → Event Handling
Product: Firefox → Core
QA Contact: general → events
Component: Event Handling → User events and focus handling
You need to log in before you can comment on or make changes to this bug.