Comparison between jqueryand Yui mouse position detection (document.doc umentelement document. Body and pagex Pagey and clientx clienty)

For how to check the mouse position, let's take a look at the implementation in jquery and Yui.

In jquery:

 

         if ( event.pageX == null && event.clientX != null ) {
var doc = document.documentElement, body = document.body;
            event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
            event.pageY = event.clientY + (doc && doc.scrollTop  || body && body.scrollTop  || 0) - (doc && doc.clientTop  || body && body.clientTop  || 0);
        }

 

 

In Yui:

 

             getPageX: function(ev) {
var x = ev.pageX;
if (!x && 0 !== x) {
                    x = ev.clientX || 0;
if ( this.isIE ) {
                        x += this._getScrollLeft();
                    }
                }
return x;
            },

            getPageY: function(ev) {
var y = ev.pageY;
if (!y && 0 !== y) {
                    y = ev.clientY || 0;
if ( this.isIE ) {
                        y += this._getScrollTop();
                    }
                }
return y;
            },

            _getScrollLeft: function() {
return this._getScroll()[1];
            },

            _getScrollTop: function() {
return this._getScroll()[0];
            },

            _getScroll: function() {
var dd = document.documentElement, db = document.body;
if (dd && (dd.scrollTop || dd.scrollLeft)) {
return [dd.scrollTop, dd.scrollLeft];
                } else if (db) {
return [db.scrollTop, db.scrollLeft];
                } else {
return [0, 0];
                }
            },

 

 

Yui is a lot more "engineering" than jquery. If you pay by the number of lines of code, we recommend Yui, haha. In the previous translations of PPK, we mentioned that we should not check the browser type in any case, because it is unnecessary and the UA of the browser is gibberish.

About document.doc umentelement and document. Body

Document.doc umentelement and document. body in different browsers and different modes will have different performance, has been done a detailed test, the address here after the http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html test conclusion is, under the standard browser, generally, there are alternative methods. In IE, when documentelement exists, it can be normally displayed. If it does not exist, document is used. body. These two reasons should be derived from HTML and XHTML.

Therefore, jquery and Yui both adopt the same method to solve this problem: Doc & Doc. scrollleft | Body & Body. scrollleft | 0.

 

About pagex Pagey and clientx clienty, scrollleft scrolltop

For mouse events, ie does not support obtaining the cursor position in the document through pagex and Pagey, but only clientx and clienty. These two parameters can only obtain the cursor position within the visible range of the browser. In this case, you need to use other methods to obtain the cursor position in the document, so scrollleft and scrolltop appear.

In some cases, the height of "content (child element)" in "element" exceeds the height of "element". In this case, scrolltop is used to indicate the height of the excess part, and scrollleft is the same. The scrolltop of the Body element refers to the height in your browser that is rolled by the scroll bar. Adding clienty with this value is not the position of the mouse relative to the document. The two frameworks are the same here. Event. Pagey = event. clienty + (Doc & Doc. scrolltop | Body & Body. scrolltop | 0)

 

About clientleft and clienttop

However, in jquery and a large number of instances found on the Internet, the clientleft/top value must be reduced.

Event. pagex = event. clientx + (Doc & Doc. scrollleft | Body & Body. scrollleft | 0)-(Doc & Doc. clientleft | Body & Body. clientleft | 0 );

What is this value used? You can first view the following figure:

 

The value of clientleft is actually the border of the element. Yui does not lose this value. Does it mean that the IE body has no border? I tested in IE that the body does have a 2 PX clientleft value. Therefore, if you want to accurately obtain the mouse position, you must subtract this clientleft from IE.