Closed Bug 307792 Opened 19 years ago Closed 12 years ago

onmousemove event has incorrect target during mouse drag

Categories

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

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

Tracking

()

Status:
RESOLVED WORKSFORME

People

(Reporter: firefox_dev, Unassigned)

Details

Attachments

(1 file)

Reporter's testcase
1.95 KB, text/html
Details 
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6

The following HTML example shows a scrollable div that fills in another div with
the node name of the target of the onmousemove event.  Steps to reproduce
problem listed in appropriate sections.

----------------------------------------------------------------------

<HTML><HEAD>
    <SCRIPT language="JavaScript">
    function Print_event_target( e )
    {
        if( !e ) {
            var e = window.event;
        }
        if( e.target ) {
            log_div.innerHTML += e.target.nodeName + " ";
        } else if( e.srcElement ) {
            log_div.innerHTML += e.srcElement.nodeName + " ";
        }

        return false;    
    }
    
    function Print_click( e ) {
        log_div.innerHTML += '(CLICK!)';
        return true;
    }
    
    document.onmousemove = Print_event_target;
    document.onmousedown = Print_click;
    
    </SCRIPT>

    <STYLE>
        body {
            -moz-user-select:   none;    /* don't allow selecting */
        }
    
        .test-div {
            width:      200px;
            height:     100px;
            border:     1px solid black;
        }
        
        #log_div {
            text-size:  8px;
        }
        
        .table {
            table-layout:       fixed; 
            border-collapse:    collapse;
        }
        
        .table td {
            border:     1px solid #eeeeee;
        }
        
    </STYLE>

</HEAD>
<BODY onload="">
<br/><br/><br/>

<div class="test-div">
    <div class="rows-div" style="overflow: auto; width: 200px; height: 100px;">
    <table class="table" style="width: 700px; height: 150px;">
        <col width="100"/>
        <col width="100"/>
        <col width="400"/>
        <col width="100"/>
        <tbody>
            <tr><td>A1</td><td>B</td><td>C</td><td>D</td></tr>
            <tr><td>A2</td><td>B</td><td>C</td><td>D</td></tr>
            <tr><td>A3</td><td>B</td><td>C</td><td>D</td></tr>
            <tr><td>A4</td><td>B</td><td>C</td><td>D</td></tr>
        </tbody>    
    </table>
    </div>
</div>

<div id="log_div"></div>
<SCRIPT language="JavaScript">
var log_div = document.getElementById( "log_div" );
</SCRIPT>

</BODY>
</HTML>


Reproducible: Always

Steps to Reproduce:
1. Move mouse around screen.  The target of the move will be appended to the div.
2. Notice how when not on the content the 'body' node is the target.
3. Move the mouse onto the table and over some of the text.  Hold down the mouse
button and move the mouse outside of the div.  The target is 'body' since the
mouse is over the body.
4. Now go back and click on the table, but not on the text.  Hold down the mouse
button and move the mouse outside the div.  'td' or 'div' nodes and other stuff
will be reported as the target instead of 'body', which is what the target
should be.  Once you release the mouse button and continue moving, the target
will be correct again.

Actual Results:  
Incorrect target reported when mouse button held down and dragged outside of the
scrollable div (when starting click not on the text within the table).

Expected Results:  
onmousemove event should always return 'body' as the target in this example when
the mouse is only over the body element, regardless of whether the mouse button
is held or not.
Attached file Reporter's testcase — 

  

  



    
    

    
  
Sounds like a mouse capture issue (and sounds like the "right" thing is happening as far as that goes).

  

  



    
    

    
  
The strange thing is if you remove the overflow, so the overflow become 'visible' it works correctly, like the mouse cannot break out of the overflowed area

  

  



    
    

    
  
That's exactly what I said in comment 2 -- non-visible overflow triggers mouse capture.  It's absolutely needed for basic things like scrolling on selection drag if you think about it.

  

  



    
    

    
  
Mouse capture is needed for scrolling on selection drag, however, in this case drag selection was specifically disallowed:

        body {
            -moz-user-select:   none;    /* don't allow selecting */
        }

Is there another reason for mouse capture?  Is there a reason mouse capture happens only if you didn't mousedown on text?

This bug is a problem for DHTML developers because if the event.target is locked to the mousedown target during a drag, it fundamentally reduces the information available.


  

  



    
    

    
  
Hi. Is there a workaround for this bug? How can I get the correct event-target? I need it for implementing drag and drop.


  

  



    
    

    
  
I've got the same target element during the mouse move in a special page, not in my simple test page....

mousedown = startDragging, mousemove = drag, mouseup = stopDragging

The element is the target element of the mousedown event.

  

  


Assignee: events → nobody
QA Contact: ian → events

    
    

    
  
It appears that this bug has since been fixed. Using the test case and following the steps in Comment 0, I am not seeing the issue in legacy Portable Firefox versions 2.0.0.20 or 3.6.28 on Windows Vista, and I do not see the issue in Firefox 20.0 on Mac OS 10.7.5.

  

  


Status: UNCONFIRMED → RESOLVED
Closed: 12 years ago
Resolution: --- → WORKSFORME
Component: Event Handling → User events and focus handling

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: