一种用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>

转载于:https://www.cnblogs.com/zhongshanblog/p/4649524.html

一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡相关推荐

jquery阻止事件冒泡的两种方法
事件的旅程: 当页面上发生一个事件时,每个层次上的DOM元素都有机会处理这个事件.以下面的页面模型为例: 1. <div class="foo">2. <span ...
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.阻止事件冒泡和默认行为二.拖拽 1, 实现拖拽相关的三大事件: 2, 实现拖拽思路: 1, 给目标元素添加onmous ...
阻止事件冒泡两种方式：event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
jquery和javascript屏蔽右键菜单及阻止事件冒泡
jquery屏蔽右键菜单 $(document).ready(function(){$(document).bind("contextmenu",function(e){retur ...
原声js 的兼容（屏幕尺寸、事件处理程序、阻止事件冒泡、事件目标等等）
1.事件处理程序 function addEvent(obj, type, fn) { //添加事件兼容 if (obj.addEventListener) { obj.addEventListene ...
html 冒泡事件拦截,JavaScript阻止事件冒泡与事件捕获
1.事件冒泡在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件. 事件冒泡依次输出:a.div.body 注意:不是所有的事件都能冒泡.blur.focus.loa ...
JQuery 阻止事件冒泡---3种实现方式
第一种:return false: 缺点:直接返回了函数,函数后面的语句没法执行了: $('.btn').on('click',function(event){do something ...retu ...
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下一.冒泡事件简介当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...
javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...

一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡

一种用javascript实现的比较兼容的回到顶部demo + 阻止事件冒泡相关推荐

最新文章

热门文章