一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡
回到页面顶部demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
height: 2000px;
}
#up {
position: fixed;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
background: #c1c1c1;
}
</style>
</head>
<body>
<div id="up"></div> <script> window.onload = function (){
var oDiv = document.getElementById("up");
var timer = null;
var bySys = true; //如何检测用户拖动了滚动条
window.onscroll = function (){
if (!bySys) {
clearInterval(timer);
}
bySys = false;
}
oDiv.onclick = function (){
timer = setInterval(function() {
var scrollTop = document.documentElement.scrollTop ||
document.body.scrollTop;
var iSpeed = Math.floor(-scrollTop/8); if (scrollTop === 0) {
clearInterval(timer);
}
bySys = true;
document.body.scrollTop = scrollTop + iSpeed;
document.documentElement.scrollTop = scrollTop + iSpeed;
}, 30);
}
}
</script>
</body>
</html>
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
width: 100px;
height: 200px;
background: #000;
display: none; }
</style>
</head>
<body>
<input type="button" value="显示" id="btn">
<div id="box"></div> <script>
var oBtn = document.getElementById("btn");
var oBox = document.getElementById("box");
oBtn.onclick = function (ev){
var oEvent = ev || event;
oBox.style.display = 'block';
oEvent.cancelBubble = true; // 阻止事件冒泡
}
document.onclick = function (){
oBox.style.display = 'none';
}
</script>
</body>
</html>
一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡的更多相关文章
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- JavaScript阻止事件冒泡（兼容IE、Chrome、FF）
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- JavaScript事件冒泡机制和阻止事件冒泡及默认事件
一.阻止事件冒泡: 1.html中加return false 2.js中加return false 3.IE下:window.event.cancelBubble = true: FF下:event ...
- jquery阻止事件冒泡的3种方式
第一种:return false, 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){ do something ... re ...
- 阻止事件冒泡两种方式：event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
- JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- JAVAscript——菜单下拉列表练习(阻止事件冒泡)
下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...
随机推荐
- php学习笔记（2）
1.算数运算 <?php $a = 8; $b = 2; $c = 3; echo $a+$b."<br>\n"; echo $a-$b."<br ...
- IO调度算法研究1
linux kernel 2.6之后提供了四种IO调度算法,每种调度算法都有其不同的特点和应用场景,系统使用者可以通过系统提供的接口,选择使用哪种IO调度算法,以及调整IO调度算法的参数,以达到最优的 ...
- win7 原版下载&激活
参考http://bbs.ithome.com/thread-478939-1-1.html品牌机 win7 32 位系下载http://bbs.ithome.com/forum.php?mod=vi ...
- QT 自动获取可用串口
本来想直接用Settings来获取的,但是串口信息类似 "\Device\Serial0",死活获取不了,用了转义.反斜杠还是获取不到,所以就放弃了,网上好像也没有获取成功的. 所 ...
- QT太多的内容和模块，怎么办？
我有个问题,QT可以做许多不同的开源项目,而且每个QT新版本都那么内容,感觉学不过来.用不过来那么我们还应该学习和使用其它语言吗? 如果回答,在需要的时候学习,那么这句话意味着,这几年你基本上就局限于 ...
- 宣布在日本地区正式发布 Windows Azure
昨天,我与 Microsoft 日本的集团副总裁 Yasuyuki Higuchi 一同站在台上,宣布在两个新地区正式发布 Windows Azure:日本东部和日本西部.能够亲自见证 Micr ...
- Hibernate 知识点复习
核心接口 1 Configuration接口负责配置并启动Hibernate,创建SessionFactory对象 2 SessionFactory接口负责初始化Hibernate.它充当数据存储 ...
- Lua学习笔记5：类及继承的实现
-- Lua中类的实现 -------------------------------- 基类 ---------------------------- classBase = {x = 0,y = ...
- Python+Django+SAE系列教程9-----Django的视图和URL
第三.四.五章介绍的就是Django中MVC的视图.模板.模型了. 首先来看视图(view),在用Django生成的站点目录中,创建一个view.py文件,这个文件開始是空的.然后我们输入下面内容: ...
- 用Aspose.Cells控件读取Excel
Aspose是一个很强大的控件,可以用来操作word,excel,ppt等文件,用这个控件来导入.导出数据非常方便.其中Aspose.Cells就是用来操作Excel的,功能有很多.我所用的是最基本的 ...