1. Block default event return false
2. By default, the system right-click menu oncontextmenu. to be compatible with all browsers, you must write document. oncontextmenu = function () {return false ;}
3. The mouse position of native Javascript is event. clientx and event. clienty.
The event property returns the horizontal (vertical) coordinates of the browser page (or customer area) when the event is triggered.
The customer zone refers to the current window.
4. In jquery, the cursor position is event. pagex and event. Pagey.
Clienty differs from Pagey. clienty ignores the scroll distance of the scroll bar, which refers to the distance between the mouse and the top of the content area, pagey adds the scroll distance of the scroll bar on the basis of clienty. The difference between clientx and pagex is also the same ..
5. The event. keycode character that returns the key to be pressed on the keyboard is all supported (event. Which is not supported in the IE6-8)
6. Relative Position:
Javascript contains offsetleft and offsettop, jquery contains offset (). Left, offset (). Top, position (). Left, position (). Top.
The differences are as follows:
Offsetleft, offsettop refers to the distance between an element and its elements.
Offset () refers to the offset of an element relative to the current visible window.
Position () refers to the offset between an element and its parent element.
Therefore, offsetleft, offsettop, and position () should be a data, (test tomorrow)
The test code is as follows:
<! Doctype HTML>The test results are as follows:
7. width and height
Javascript contains offsetwidth/offsetheight, which indicates the width and height of an element, including the border, inner margin, and not the outer margin.
Jquery contains width ()/height (), innerwidth ()/innerheight (), outerwidth (Boolean)/outerheight (Boolean)
Width ()/height (): Specifies the width and height values after Dom rendering.
Innerwidth ()/innerheight () indicates the width + Left and Right padding/height + upper and lower padding values after Dom rendering.
Outerwidth ()/outerheight () indicates the width + Left and Right padding + Left and Right Border values after Dom rendering/height + up and down padding + up and down border values
Outerwidth (true)/outerheight (true) indicates the value of margin added to outerwidth ()/outerheight ().
The test case is as follows:
<! Doctype HTML> <title> HTML5 example </title> <meta charset = "UTF-8"> <style type = "text/CSS"> * {margin: 0; padding: 0 ;}. demo {width: 200px; Height: 200px; padding: 50px; Border: 10px solid rgba (0.5, 15, 00,); margin: 100px ;} </style> <SCRIPT type = "text/JavaScript" src = "jquery-1.9.1.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript" >$ (function () {$ ('<p> </P> 'privacy .html ('width: 'privacy ('.demo'}.css ('width') +'; padding: 'privacy certificate ('.demo'}.css ('padding') + '; margin: '{}('.demo'}.css ('margin ')). appendto ('body') $ ('<p> width:' + $ ('. demo '). width () + '; innerwidth:' + $ ('. demo '). innerwidth () + '; outerwidth:' + $ ('. demo '). outerwidth () + '; outerwidth/true' + $ ('. demo '). outerwidth (true) + '; </P> '). appendto ('body')}) </SCRIPT> <body> <SCRIPT type = "text/JavaScript"> window. onload = function () {odiv = document. getelementbyid ('Demo') OP = document. createelement ('P') op. innerhtml = 'width: '+ odiv. offsetwidth + '; Height:' + odiv. offsetheight; document. body. appendchild (OP) }</SCRIPT> <Div class = "Demo" id = "Demo"> </div> </body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
