javascript function does not work when used <!DOCTYPE html>
Question
Given the following code:
function move() { dom = document.getElementById('image'); dom.style.top=event.clientY+"px"; dom.style.left=event.clientX+"px"; }
<!DOCTYPE html> <html> <head> <title>Program 3</title> <script type="text/javascript" src="pr3.js"></script> </head> <body onmousedown="move();"> <img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/> </body> </html>
Edit
The image only moves when clicked on the image. But when clicked outside the image, it does not move.
However, without <!DOCTYPE html> , it moves wherever clicked inside the browser window and not explicitly on the image.
2 answers
solution1
2 2014-11-10 20:44:49
The problem is that in "quirks mode" body height is set to 100%, while in "standards mode" it is determined by its content. So without doctype(rendering in quirks mode) whole page area is body - so it is clickable, but in "standards mode" it is only image...
if you want you can also do this in "standards mode", by applying following css:
html, body {
height: 100%;
}
working example: http://plnkr.co/edit/wrHS3b8nQ9tfi5AMWqoE?p=preview
solution2
0 2014-11-10 20:44:35
Absolutely-positioned elements to not affect the size of their containing element. Consider a case where we use a red-colored <div> instead of <body> as the clickable element:
function move() { dom = document.getElementById('image'); dom.style.top=event.clientY+"px"; dom.style.left=event.clientX+"px"; }
div { background-color: red; }
<!DOCTYPE html> <html><body> <div onmousedown="move();"> <img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/> </div> </body></html>
This snippet should contain a red-colored <div> , but it doesn't, because the <div> is empty or anything that would cause it to have a size greater than 0. The image it contains is absolutely-positioned, which does not affect the size.
Now consider a similar <div> with a CSS-specified size:
function move() { dom = document.getElementById('image'); dom.style.top=event.clientY+"px"; dom.style.left=event.clientX+"px"; }
div { background-color: red; width: 400px; height: 400px; }
<!DOCTYPE html> <html><body> <div onmousedown="move();"> <img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/> </div> </body></html>
Now the div is larger than zero, and clicking inside produces the expected result.
this is why your <body> clicks don't work: the <body> has a width and height of 0. If you instead place the onclick listener on the <html> element (which is full-width and full-height by default) or on an element with non-zero dimensions, you'll see your code works. I'm not sure I'd advise putting binding click listeners on the <html> element; I would advise using a CSS-sized <div> .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.