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 ...
随机推荐
- Super Jumping! Jumping! Jumping! 基础DP
Super Jumping! Jumping! Jumping! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 ...
- git log 查看 当前分支的 提交历史
git log 查看 当前分支的 提交历史 在提交了若干更新之后,想回顾下提交历史,可以使用 git log 命令查看 默认不用任何参数的话,git log 会按提交时间列出所有的更新,最近的更新排 ...
- struts2使用iterator标签显示嵌套Map - 云自无心水自闲 - BlogJava
"> <s:iterator value="dataMap.keySet()" id="class"> ...
- Redis 代理 twemproxy
4台 redis 服务器 172.16.1.37:6379 - 1 172.16.1.36:6379 - 2 172.16.1.35:6379 - 3 172.16.1.34:6379 ...
- Codeforces#355
大小号刷题,大号,被查重,悲剧,最后小号过了3题 A题: 分析:大于h的+2,小于等于h的+1 #include <iostream> #include <cstdio> #i ...
- FreeRTOS基础以及UIP之协程--C语言剑走偏锋
在FreeRTOS中和UIP中,都使用到了一种C语言实现的多任务计数,专业的定义叫做协程(coroutine),顾名思义,这是一种协作的例程, 跟具有操作系统概念的线程不一样,协程是在用户空间利用程序 ...
- Spring Junit 读取WEB-INF下的配置文件
假设Spring配置文件为applicationContext.xml 一.Spring配置文件在类路径下面 在Spring的java应用程序中,一般我们的Spring的配置文件都是放在放在类路径下面 ...
- iOS 消息推送原理及实现总结 分类： ios技术 2015-03-01 09:22 70人阅读 评论(0) 收藏
在实现消息推送之前先提及几个于推送相关概念,如下图: 1. Provider:就是为指定IOS设备应用程序提供Push的服务器,(如果IOS设备的应用程序是客户端的话,那么Provider可以理解为服 ...
- 设置MyEclipse黑色主题背景
设置MyEclipse黑色主题背景 1. 下载 http://eclipsecolorthemes.org/ 看哪个合适直接点击进入, 下载右边的epf 2. 下载完成...打开myeclipse. ...
- 微信和QQ网页授权登录
一:微信授权 //用户授权 public function is_weixin(){ $url = "https://open.weixin.qq.com/connect/oauth2/au ...