一种用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——菜单下拉列表练习(阻止事件冒泡)
下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...
随机推荐
- 【转】C#实现MD5加密
转自:C#实现MD5加密 常用的如下: 方法一 首先,先简单介绍一下MD5 MD5的全称是message-digest algorithm 5(信息-摘要算法,在90年代初由mit laborator ...
- Python每日一练(1):计算文件夹内各个文章中出现次数最多的单词
#coding:utf-8 import os,re path = 'test' files = os.listdir(path) def count_word(words): dic = {} ma ...
- 13-C语言字符串函数库
目录: 一.C语言字符串函数库 二.用命令行输入参数 回到顶部 一.C语言字符串函数库 1 #include <string.h> 2 字符串复制 strcpy(参数1,参数2); 参数1 ...
- How to configure connectingstrings in Web.config
先来看一下默认的连接SQL Server数据库配置<connectionStrings> <add name="LocalSqlServer" connect ...
- Push segues can only be used when the.....
刚刚遇到的两个错误,. 1, Terminating app due to uncaught exception'NSGenericException', reason: 'Push segues c ...
- Delphi中取整函数Round的Bug解决
Delphi中 Round函数有个Bug一旦参数是形如 XXX.5这样的数时如果 XXX 是奇数 那么就会 Round up如果 XXX 是偶数 那么就会 Round down例如 Round(17. ...
- Shared_from_this 几个值得注意的地方
shared_from_this()是enable_shared_from_this<T>的成员 函数,返回shared_ptr<T>.首先需要注意的是,这个函数仅在share ...
- A2W和W2A ：很好的多字节和宽字节字符串的转换宏
以前看<Window核心编程>,感觉多字节和宽字节之间还比较麻烦的,至少MultiByteToWideChar函数和WideCharToMultiByte函数有足够多的参数的意义让我们去理 ...
- Objective-c 程序结构
类是Objective-c的核心,Objective-c程序都是围绕类进行的.Objective-c程序至少包含以下三个部分: 1.类接口:定义了类的数据和方法,但是不包括方法的实现代码. 2.类实现 ...
- poj2342 Anniversary party【树形dp】
转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4316097.html ---by 墨染之樱花 [题目链接]http://poj.org/p ...