一种用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——菜单下拉列表练习(阻止事件冒泡)
下拉列表框,鼠标点击文本框,出现下拉,鼠标(离开的时候或者点击网页其他位置时)下拉列表消失.鼠标放到下拉列表的某一项上变背景色,点击下拉列表的某一项将该项的值显示在文本框内,然后下拉列表消失. < ...
随机推荐
- 属性"XmlFileName"的代码生成失败
属性"XmlFileName"的代码生成失败.错误是:"未将对象引用设置到对象实例" 解决: 控件修改造成,关闭打开页面,重新生成
- ios如何实现推送通知
推送通知的步骤:1.询问是否允许推送通知.2.如果用户允许在APPDELEGATE 中实现 - (void)application:(UIApplication *)application didRe ...
- 安装VMware vSphere 的目的就是在一台物理服务器上安装很多很多的虚拟机
版权声明:本文为博主原创文章,未经博主允许不得转载. 我们安装VMware vSphere 的目的就是在一台物理服务器上安装很多很多的虚拟机,我们可以通过VMware vSphere Client直接 ...
- Access2007中如何运行SQL执行SQl语句
1. 在“创建”选项卡中,单击“其他”组中的“查询设计”. 2. 单击“显示表”对话框中的“关闭”,而不添加任何表或查询. 3. 在“设计”选项卡中,单击“查询类型”工作组中的“联合”. 4. 单击“ ...
- 用C#开发较完整的Windows任务管理器
原文 用C#开发较完整的Windows任务管理器 这个代码没有什么技术含量,仅仅使用 WMI 和 API 实现了 Windows 任务管理器的部分功能. 但代码里面封装了一个 SystemInfo 的 ...
- 求最大值最小值的方法 时间复杂度O(n)
#include<iostream> #include <iostream> #include <bitset> #include <ctime> us ...
- cython教程
.写测试代码: zhouhh@zhouhh-home:~$ vi test.pyx [python] view plaincopy def sayhello(char* str): if str == ...
- Android手机设置隐藏命令大全
注意:因Android版本较多,固有部分隐藏命令或不能使用 *#*#4636#*#* 显示手机信息.电池信息.电池记录.使用统计数据.WiFi 信息 *#*#7780#*#* 重设为原厂设定,不会删除 ...
- [置顶] JDK-Future 模式和实现
最近的项目用到了多线程,发现java.util.concurrent.Future蛮好用的. 像平时,写多线程一般使用Thread/Runnable,直接扔给线程池执行就好了.但是遇到了一些需要获取线 ...
- React Native for android 项目驱动教程
第一节 搭建开发环境 第二节 显示页面标题 第三节 实现页面布局 # React native是什么? React Native,是颠覆性的移动开发技术.它使用js开发,又是原生应用,不同于Hybri ...