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 ...
随机推荐
- Shortest Path
Shortest Path Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
- RS485通讯协议的应用 (转)
源:http://blog.chinaunix.net/uid-26921272-id-3506640.html RS485缺点: RS485总线是一种常规的通信总线,它不能够做总线的自动仲裁,也就是 ...
- 在线生成二叉树（基于EaselJS（canvas））
学习二叉树的时候,老在本子上画二叉树好麻烦.其实就想看下树结构.最近html5蛮火的,就用canvas和EaselJS.js(开发flash公司开发的插件)插件实现了个.大家随便用吧. 这是个什么东西 ...
- 【poj解题】3663
排序, 遍历,需要裁减 #include <stdio.h> #include <stdlib.h> #include <string.h> #define MAX ...
- CentOS x 64 MooseFS 学习
一.MFS 简介.... MooseFS(Moose File System,mfs)是一种分布式文件系统,它将数据分布在网络中的 不同服务器上,支持FUSE,客户端可以作为一个 普通的Unix 文件 ...
- (简单) POJ 3279 Fliptile，集合枚举。
Description Farmer John knows that an intellectually satisfied cow is a happy cow who will give more ...
- 将USBASP改造成STK502编程器（转）
源:将USBASP改造成STK502编程器 现在淘宝上还有不少USBasp或者USBisp的51/AVR编程器,它们使用了开源的USBasp硬件,以及PROGISP软件或者其它一些下载软件.其实我们可 ...
- 使用Java操作文本文件的方法详解
使用Java操作文本文件的方法详解 摘要: 最初java是不支持对文本文件的处理的,为了弥补这个缺憾而引入了Reader和Writer两个类 最初java是不支持对文本文件的处理的,为了弥补这个缺憾而 ...
- CentOS编译安装LNMP环境
这里是教大家如何在centos下利用源码编译安装LNMP环境. 工具/原料 centos服务器一台 自用电脑一台 准备篇 配置好IP.DNS .网关,确保使用远程连接工具能够连接服务器 配置防火墙,开 ...
- mysql 省市联动sql 语句
/*MySQL Data TransferSource Host: localhostSource Database: virgoTarget Host: localhostTarget Databa ...