关于JavaScript的死链设置问题
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> </script> </head> <body> <input type="button" id="btn" value="单击" onclick="alert('添加')" /> <br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <a href="#" onclick="alert('点中的是#')">方法1</a> 弹窗并返回页面最上边 <br /> <a href="JavaScript:Void(0)" onclick="alert('点中的是Void')">方法2</a> 弹窗但停留在当前页面
<br /> <a href="JavaScript:alert('点中的是Href')">方法3</a> 弹窗但停留在当前页面 </body> </html>
关于JavaScript 的setInterval定时器的测试
<body> <input type="button" name="name" id="btn" /> </body> </html> <script type="text/javascript"> var setId= setInterval(function () { alert(''); }, 2000);//声明一个计时器，2000毫秒执行一次 window.onload = function () { document.getElementById('btn').onclick = function () { clearInterval(setId); }; //注销指定计时器 }
setInterVal 定时器的小Demo--跑马灯
<title>这是什么事呢</title> </head> <body><input type="button" name="name" id="left" /> <input type="button" name="name" id="right" /></body> </html> <script type="text/javascript"> function Demo(num) { if (num == 1) { setInterval(function () { var text = document.title; document.title = text.charAt(text.length-1) + text.substr(0, text.length - 1); }, 1000); } else { setInterval(function () { var text = document.title; document.title = text.substr(1) + text.charAt(0); }, 1000); } } document.getElementsByTagName(right‘).onclick = function () { // Demo(1); }; document.getElementById('left').onclick = function () { Demo(0); };
浏览器的 粘贴，复制事件
<body> 现在测试一下代码！看看会出现什么问题 <input type="text" id="txt"/> </body> </html> <script type="text/javascript"> onload = function () { document.body.onpaste = function () { return false; //禁止在Body中粘贴 } document.body.oncopy = function () { return false; //禁止复制Boby中的文字 }
///方法3 在复制的文字结尾添加 标签
document.body.oncopy = function () {
setTimeout(function () {
clipboardData.setData('text', clipboardData.getData('text') + '自定义文字'); //text 为 获取粘贴板中那种类型数据
}, 100); //100为时间间隔让复制操作与添加字符串操作互不冲突
}
} }
关于事件冒泡
事件冒泡：如果元素A嵌套在元素B中，那么A被点击不仅A的onclick事件会被触发，B的onclick也会被触发。触发的顺序是“由内而外”
。
<script type="text/javascript"> onload = function () { document.getElementById('dv').onclick = function () { // alert(this.id); alert(window.event.srcElement.id);//事件源 }; document.getElementById('p1').onclick = function () { alert(this.id); }; function stop(e) { alert(this.id); function stopBubble（e）{ if(e||e.stopPropagation){ e.stopPropagation(); //火狐中取消事件冒泡 } else{ window.event.cancelBubble=true; //IE中取消事件冒泡 } } }; }; </script> </head> <body> <div id="dv1" style=" 300px; height:200px; onclick='stop(event)'> <div id="dv" style=" 300px; height:200px; background-color:Yellow; cursor:pointer;"> <p id="p1" style=" 150px; height:100px; background-color:Green;cursor:pointer;"> <span id="sp" style=" cursor:pointer;">这是span</span> </p> </div> </body>