For example, in a webpage chat room, the scroll bar will automatically scroll down as the content increases.
When you press the mouse over the scroll bar, we can assume that he or she is browsing the chat content. In this case, a good user experience will not allow the scroll bar to automatically scroll.
To implement this function, you may first think of the mouse down and mouse up events.
However, we will find that the mouse up cannot be captured when the left mouse button is pressed on the scroll bar and then released. Example:
Copy codeThe Code is as follows: <Head>
<Title> </title>
<Script type = "text/javascript">
Var captureTarget = null;
Function down (obj, e ){
CaptureTarget = obj;
// Open comments for IE
// CaptureTarget. setCapture ();
E = e? E: window. event;
}
Function up (obj, e ){
// If (captureTarget)
// CaptureTarget. releaseCapture ();
E = e? E: window. event;
Div2.innerText = e. srcElement. tagName;
}
Document. addListener = function (event, callback ){
If (! Document. all)
This. addEventListener (event, callback );
Else
This. attachEvent ("on" + event, callback );
}
Document. addListener ("mouseup", function () {alert (1 );});
</Script>
</Head>
<Body>
<Div style = "width: 200px; height: 200px; overflow: scroll" onmousedown = "down (this, event);">
<Div style = "height: 500px; width: 500px"> </div>
</Div>
</Body>
</Html>
Save it as an html file, open it in the browser, and click "try" on the scroll bar, and then click "try" elsewhere.
Since we have not studied W3C documents in depth, we can only guess here.
Considering the features of the scroll bar, the browser may have setCapture for the scroll bar when you press the scroll bar with the mouse, and releaseCapture for the scroll bar after the mouse is released. the scroll bar does not belong to the Dom object, therefore, the mouseup event cannot be captured before the mouse is released.
