Bug倉庫 // 程式日記

9月 02 週六 201718:28
mousover時，e.screenX、e.pageX、e.clientX的差別（滑鼠位置）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style:none;
}
#box{
width: 50px;
height: 200vh;
background-color: #fa0;
display: inline-block;
vertical-align: top;
}
span{
color: darkRed;
}
.words{
margin: 0 0 0 10px;
display: inline-block;
vertical-align: top;
position: fixed;
}
</style>
</head>
<body>
<div id="box"></div>
<div class="words">
<div>離螢幕左上角左距 <span id="screenX"></span> </div>
<div>離螢幕左上角上距 <span id="screenY"></span> </div>
<div>（所以是雙螢幕的話就會很寬，整個衝破瀏覽器）</div>
<br>
<div>離整個html最左上角左距 <span id="pageX"></span> </div>
<div>離整個html最左上角上距 <span id="pageY"></span> </div>
<div>（所以卷軸往下滾時，高會不斷累加）</div>
<br>
<div>距離目前視窗左上角左距 <span id="clientX"></span> </div>
<div>距離目前視窗左上角上距 <span id="clientY"></span> </div>
</div>
<script type="text/javascript">
document.getElementById('box').onmouseover=function(e){
document.getElementById('screenX').innerHTML=e.screenX;
document.getElementById('screenY').innerHTML=e.screenY;
document.getElementById('pageX').innerHTML=e.pageX;
document.getElementById('pageY').innerHTML=e.pageY;
document.getElementById('clientX').innerHTML=e.clientX;
document.getElementById('clientY').innerHTML=e.clientY;
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(421)

個人分類：Javascript

▲top

9月 02 週六 201718:28
mousover時，e.screenX、e.pageX、e.clientX的差別（滑鼠位置）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style:none;
}
#box{
width: 50px;
height: 200vh;
background-color: #fa0;
display: inline-block;
vertical-align: top;
}
span{
color: darkRed;
}
.words{
margin: 0 0 0 10px;
display: inline-block;
vertical-align: top;
position: fixed;
}
</style>
</head>
<body>
<div id="box"></div>
<div class="words">
<div>離螢幕左上角左距 <span id="screenX"></span> </div>
<div>離螢幕左上角上距 <span id="screenY"></span> </div>
<div>（所以是雙螢幕的話就會很寬，整個衝破瀏覽器）</div>
<br>
<div>離整個html最左上角左距 <span id="pageX"></span> </div>
<div>離整個html最左上角上距 <span id="pageY"></span> </div>
<div>（所以卷軸往下滾時，高會不斷累加）</div>
<br>
<div>距離目前視窗左上角左距 <span id="clientX"></span> </div>
<div>距離目前視窗左上角上距 <span id="clientY"></span> </div>
</div>
<script type="text/javascript">
document.getElementById('box').onmouseover=function(e){
document.getElementById('screenX').innerHTML=e.screenX;
document.getElementById('screenY').innerHTML=e.screenY;
document.getElementById('pageX').innerHTML=e.pageX;
document.getElementById('pageY').innerHTML=e.pageY;
document.getElementById('clientX').innerHTML=e.clientX;
document.getElementById('clientY').innerHTML=e.clientY;
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 02 週六 201712:08
label for以及focus method都可以做到的事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label for="username">方法一：按我直接去focus那個input</label>
<br><br><br>
<input type="text" id="username">
<br><br><br>
<p id="p">方法二：按我直接去focus那個input</p>
<br><br><br>
<input type="password" id="password">
<script type="text/javascript">
document.getElementById('p').onclick=function(){
document.getElementById('password').focus();
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 02 週六 201712:08
label for以及focus method都可以做到的事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label for="username">方法一：按我直接去focus那個input</label>
<br><br><br>
<input type="text" id="username">
<br><br><br>
<p id="p">方法二：按我直接去focus那個input</p>
<br><br><br>
<input type="password" id="password">
<script type="text/javascript">
document.getElementById('p').onclick=function(){
document.getElementById('password').focus();
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(189)

個人分類：Javascript

▲top

9月 02 週六 201711:59
nodeName、parentNode、e.preventDefault 事件物件的操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: darkRed;
}
#container{
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<img src="https://api.fnkr.net/testimg/50x50/00CED1/FFF/?text=img+placeholder">
<h2>我是文字</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores neque, cum deserunt. Sed tempore veritatis impedit vero, odio qui unde!</p>
<input type="text" name="">
<a href="http://www.google.com" id="a">我是連結但我按了沒反應喔</a>
</div>
<h2>nodeName顯示<span id="result"></span></h2>
<h2>parentNode顯示<span id="result2"></span></h2>
<script type="text/javascript">
document.getElementById('container').onclick=function(e){
document.getElementById('result').innerHTML=e.target.nodeName;
document.getElementById('result2').innerHTML=e.target.parentNode;
}
document.getElementById('a').onclick=function(e){
e.preventDefault();
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 02 週六 201711:59
nodeName、parentNode、e.preventDefault 事件物件的操作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: darkRed;
}
#container{
cursor: pointer;
}
</style>
</head>
<body>
<div id="container">
<img src="https://api.fnkr.net/testimg/50x50/00CED1/FFF/?text=img+placeholder">
<h2>我是文字</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores neque, cum deserunt. Sed tempore veritatis impedit vero, odio qui unde!</p>
<input type="text" name="">
<a href="http://www.google.com" id="a">我是連結但我按了沒反應喔</a>
</div>
<h2>nodeName顯示<span id="result"></span></h2>
<h2>parentNode顯示<span id="result2"></span></h2>
<script type="text/javascript">
document.getElementById('container').onclick=function(e){
document.getElementById('result').innerHTML=e.target.nodeName;
document.getElementById('result2').innerHTML=e.target.parentNode;
}
document.getElementById('a').onclick=function(e){
e.preventDefault();
}
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(21)

個人分類：Javascript

▲top

9月 02 週六 201711:31
沒有等於大於小於的判斷式?!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
if(!apple){
var apple='apple';
}
var fruit=apple || orange;
document.write(fruit);
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 02 週六 201711:31
沒有等於大於小於的判斷式?!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
if(!apple){
var apple='apple';
}
var fruit=apple || orange;
document.write(fruit);
</script>
</body>
</html>

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(22)

個人分類：Javascript

▲top

9月 02 週六 201711:23
因為瀏覽器支援問題蹦出的不同語法

addEventListener和attachEvent

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(0)

個人分類：Javascript

▲top

9月 02 週六 201711:23
因為瀏覽器支援問題蹦出的不同語法

addEventListener和attachEvent

(繼續閱讀...)

Jerry 發表在痞客邦留言(0) 人氣(1)

個人分類：Javascript

▲top

Bug倉庫 // 程式日記已經搬家到 https://bugswarehouse.blogspot.tw/ 了喔

文章搜尋

文章搜尋

文章分類

伺服器架設 (1)

伺服器架設 (1)

前端框架 (2)

前端框架 (2)

HTML與開發工具 (2)

HTML與開發工具 (2)

CSS與framework (4)

CSS與framework (4)

JS與函式庫 (3)

JS與函式庫 (3)

後端框架 (1)

後端框架 (1)

文章分類

伺服器架設 (1)

伺服器架設 (1)

前端框架 (2)

前端框架 (2)

HTML與開發工具 (2)

HTML與開發工具 (2)

CSS與framework (4)

CSS與framework (4)

JS與函式庫 (3)

JS與函式庫 (3)

後端框架 (1)

後端框架 (1)

最新文章

最新文章

個人資訊

個人資訊

文章精選

文章精選

熱門文章

熱門文章

最新留言

最新留言

動態訂閱

動態訂閱

誰來我家

誰來我家

參觀人氣

參觀人氣