一种用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——菜单下拉列表练习(阻止事件冒泡)
下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...
随机推荐
- IMP-00008: unrecognized statement in the export file: string的问题分析
分类: Linux 上周需要将oracle10g中的某一个用户下的对象导入到oracle11g中去.用exp在10g的数据库服务器上导出的dump文件,再用imp在11g的数据库服务器上将dump文件 ...
- 用javascirpt画个太极
偶然看到用代码画太极,感觉很有趣,用JS写了一个 过程很简单,画了张图,应该一看就懂了 代码也很简单,如下,注释很多 function TaiJi(r,canvas){ this.r = r; thi ...
- 射频识别技术漫谈(18)——Mifare Desfire
Mifare DESFire(MF3 IC D40/D41,本文以D40为例)遵守14443 TypeA协议,卡内的数据以文件形式存储,所以有人认为它是准CPU卡,主要用于安全性要求较高的非接触式领 ...
- Delphi 的动态数组
传统的Pascal 语言其数组大小是预先确定的,当你用数组结构声明数据类型时,你必须指定数组元素的个数.专业程序员也许知道些许动态数组的实现技术,一般是采用指针,用手工分配并释放所需的内存. Delp ...
- Spring Boot Admin Reference Guide
1. What is Spring Boot Admin? Spring Boot Admin is a simple application to manage and monitor your S ...
- WEB和APP谁是互联网未来
据中国多家权威报告显示,作为多年专业化互联网公司炎帝网络科技综合评估预测,预计2016年全球互联网设备将达到100亿部.如果届时全球人口达到73亿,意味着平均每人将有1.4部设备.智能交通将增长50倍 ...
- Ubuntu Linux: How Do I install .deb Packages?
Ubuntu Linux: How Do I install .deb Packages? Ubuntu Linux: How Do I install .deb Packages? by Nix C ...
- leetCode 24. Swap Nodes in Pairs (双数交换节点) 解题思路和方法
Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For exa ...
- poj2486 Apple Tree【区间dp】
转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4374766.html ---by 墨染之樱花 [题目链接]http://poj.org/p ...
- python第三方模块
python相关:1.zeromq网络库:2.twisted框架:twisted:一个基于事件驱动,异步的python高性能网络开发框架:注:什么是基于事件驱动:当(鼠标点击事件)事件注册器注入事件, ...