jQuery mouseup() & mousedown() scrollbar bug.

Demo for Ticket #8184.

HTML

<h2>jQuery (including 1.5) mouseup() &amp; mousedown() scrollbar bug.</h2>
<p>Click anywhere on the page &mdash;that&rsquo;s not part of the scrollbar&mdash; and both <em>mousedown</em> and <em>mouseup</em> events fire.</p>
<p>Click on the scrollbar <strong>tracks, thumbs and buttons,</strong> and only <em>mousedown</em> fires.</p>
<p>Click on the <strong>corner</strong> and only <em>mouseup</em> fires.</p>
<p>This happens on all browsers except Firefox. Also documented <a href="http://stackoverflow.com/questions/4145402/mouseup-bug-in-all-browsers-except-firefox" title="StackOverflow">here</a>.</p>
<textarea>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Sed posuere consectetur est at lobortis. Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna.
    
    Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.
    
    Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
    
    Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
    
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus...

CSS

body{margin: 60px;}
p{width:400px;margin:12px 0 12px 0;}
textarea{width:400px;height:200px;overflow:scroll;}
em{font-family:Courier;color:#444;background:#eee;font-style:normal;padding:0 4px;}
h2{font-size:1.6em;}

JavaScript

$(document).ready(function() {
    $('#textarea').mousedown(function() {
        $("#alerts p").append("<span style=\"color:blue;\">Mouse down. </span>");
    });
    $(document).mouseup(function() {
        $("#alerts p").append("<span style=\"color:red;\">Mouse up. </span>");
    })
});