JS-鼠标滚轮事件 和 阻止默认行为
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="height: 2000px;">
<style type="text/css">
#div1{width:100px;height:100px;background: red;}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1'); /*
ie/chrome : onmousewheel
event.wheelDelta //firefox 下没有这个属性
上 ： 120
下 ：-120 firefox : DOMMouseScroll 必须用addEventListener
addEventListener 必须是标准浏览器才支持 （ie6 7 8 用的是attachEvent）
event.detail
上：-3
下：3 return false 阻止的是 obj.on事件名称=fn 所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault();
*/
oDiv.onmousewheel = fn;
if(oDiv.addEventListener){
oDiv.addEventListener('DOMMouseScroll', fn ,false);
} function fn(ev){
//alert()
var ev = ev || event;
//alert(ev.wheelDelta);
//alert(ev.detail) var b = true;
if(ev.wheelDelta){
b = ev.wheelDelta > 0 ? true : false
}else{
b = ev.detail < 0 ? true : false
}
//alert(b)
if(b){
this.style.height = this.offsetHeight - 10+'px';
}else{
this.style.height = this.offsetHeight + 10+'px';
} if(ev.preventDefault){
ev.preventDefault();
}
return false;
} }
</script> <script type="text/javascript">
//return false 阻止的是 obj.on事件名称=fn 所触发的默认行为
// addEventListener绑定的事件需要通过event下面的preventDefault();
//阻止默认行为是根据事件的绑定决定的 //右键行为阻止
var context1 = function(){
document.oncontextmenu = function (){// chrome
return false;
} }
//context1() //标准浏览器 var context2 = function (){
document.addEventListener('contextmenu',function(ev){
ev.preventDefault();
//return false;
})
}
//context2() var context3 = function(){
document.attachEvent('contextmenu',function(){
return false;
})
}
context3() //IE非标准 </script>
<div id="div1"></div>
</body>
</html>
JS-鼠标滚轮事件 和 阻止默认行为的更多相关文章
- js鼠标滚轮事件兼容
JavaScript鼠标滚轮事件 IE6.0首先实现了鼠标的滚轮事件,其良好的交互效果得到认可,随后Opera.chrome.safari等主流浏览器都实现了该效果,不过存在着很大的兼容问题. 大多数 ...
- JS鼠标滚轮事件解析
一.不同浏览器的鼠标滚轮事件 首先,不同的浏览器有不同的滚轮事件.主要是有两种,onmousewheel(IE/Opera/Chrome支持,firefox不支持)和DOMMouseScroll(只有 ...
- js鼠标滚轮事件
不多说,直接上代码. //非ie document.body.onmousewheel = function(event) { event = event || window.event; conso ...
- JS鼠标滚轮事件详解
鼠标滚轮事件 //兼容性写法,该函数也是网上别人写的,不过找不到出处了,蛮好的,所有我也没有必要修改了 //判断鼠标滚轮滚动方向 if (window.addEventListener)//FF,火狐 ...
- JS 鼠标滚轮事件（mousewheel/DOMMouseScroll）
onmousewheel (FireFox不支持此事件) // IE/Opera/Chrome/Safari document.body.onmousewheel = function(event) ...
- js鼠标滚轮事件上滚下滚判断
onmousewheel <script> var scrollFunc = function (e){ //其实我一开始也不知道用啥 //console.log(e)我们可以打印一下 / ...
- js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
- js整频滚动展示效果（函数节流鼠标滚轮事件）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js中的鼠标滚轮事件
## 事件对象 event 1 event事件对象,表示用来获取事件的详细信息,比如得到鼠标的横坐标:事件对象.clientX(clientX是可视区坐标) window.onclick = func ...
随机推荐
- Python 100例（上）
如果你已经把基础看完,可以尝试一下看看以下例子了,如果不会做也不要紧,你要尝试手动把所有的代码都敲一边.别嫌麻烦,因为都是从麻烦到简单的. 实例1: 题目:有1.2.3.4个数字,能组成多少个相互不同 ...
- javascript中0.01*2324=23.240000000000002 ？
js中的乘法运算的小问题 0.01*2324=23.240000000000002 ? , 结果为什么出现这么多小数位呢?
- ural1521 War Games 2
War Games 2 Time limit: 1.0 secondMemory limit: 64 MB Background During the latest war games (this s ...
- Ibatis教程
Ibatis教程 |字号 转自:http://blog.csdn.net/lhminjava/article/details/1871136 ibatis 开发指南ibatis Quick S ...
- The 2014 ACMICPC Asia Regional Shanghai Online
XorZip小队第一次合作,虽然结果还是有些可惜,但是状态和感觉都还不错. [A]数论+二分(-_-///) [B]Lucas定理+数位DP(-_-///) [C]LCA.LCT+树链剖分 [D]题目 ...
- JAVA中浅复制与深复制 - coolmist - ITeye技术网站
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- mysql用存储过程插入百万条数据, 及查询优化
查看所有存储过程: show procedure status; 查看详细存储过程 ptest: show create procedure ptest; 存储过程插入数据: create table ...
- ZOJ 3933 Team Formation
费用流裸题......比赛的时候少写了一句话....导致增加了很多无用的边一直在TLE #include<cstdio> #include<cstring> #include& ...
- UVA 1386 Cellular Automaton
矩阵快速幂. 样例是这样构造矩阵的: 矩阵很好构造,但是500*500*500*logk的复杂度显然是无法通过这题的. 其实本题构造出来的矩阵是一个循环矩阵,只需直到第一行或者第一列,即可直到整个矩阵 ...
- linux下配置ip地址四种方法(图文)
(1)Ifconfig命令 第一种使用ifconfig命令配置网卡的ip地址.此命令通常用来零时的测试用,计算机启动后 ip地址的配置将自动失效.具体用法如下.Ipconfig ethx i ...