阻止默认行为
默认行为：如鼠标按下右键时会出现菜单就是默认行为
e.preventDefault() 不兼容低版本IE
兼容低版本IE是return false （要写在代码最后面）
document.oncontextmenu = function ( e ){ //右键菜单事件
e = e || window.event;
alert( 1 );
}
弹出右键菜单
document.oncontextmenu = function ( e ){ //右键菜单事件
e = e || window.event;
e.preventDefault()// 阻止默认事件( 不兼容IE8及以下 )
alert( 1 );
}
没有弹出右键菜单
兼容IE8及以下 return false 要写在最后面 不然后面代码没办法执行
document.oncontextmenu = function ( e ){
e = e || window.event;
// e.preventDefault();
alert( 1 );
return false;
}
注意：用注册时return false在主流浏览器没办法用 在IE8及其以下可以阻止
document.addEventListener( 'contextmenu' , function ( e ){
alert( 1 );
return false;
})
主流浏览器
document.attachEvent( 'oncontextmenu' , function ( e ){
alert( 1 );
return false;
})
Animation.gif
在企业中拿到代码我们不知道之前写的是直接绑定还是注册绑定
我们就要做兼容
e.preventDefault ? e.preventDefault() : e.returnValue = false;
注意：要 e.returnValue 事件对象下的returnValue
案例 自定义右击菜单
<style type="text/css">
/*清除样式*/
*{margin: 0;padding: 0;}
ul li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
/*---------------------------------------------------*/
div{
display: none;
position: absolute;
width: 200px;
}
div li{
width: 100%;
height: 30px;
}
</style>
</head>
<body>
<div id='box'>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var oBox = document.getElementById( 'box' ),
aLi = oBox.children[0].children,
arrColor = [ 'red' , 'green' , 'skyblue' ],
length = aLi.length,
cDownX,cDownY;
console.log( length );
for (var i = 0; i < length; i++) {
aLi[i].style.background = arrColor[i%3];
addEvent( aLi[i] , 'click' ,function( e ){
e = e || window.event;
e.cancelBubble = true;
} )
}
// 先阻止默认行为
addEvent( document , 'contextmenu' , function ( e ){
e = e || window.event;
oBox.style.display = 'block';
// 获取右击的坐标
cDownX = e.clientX;
cDownY = e.clientY;
oBox.style.top = cDownY + 'px';
oBox.style.left = cDownX + 'px';
e.preventDefault ? e.preventDefault() : e.returnValue = false;
})
addEvent( document , 'click' , function (){
oBox.style.display = 'none';
} )
function addEvent( obj , type ,eFn ){
function fn( e ){
eFn.call( obj , e )
}
if( window.addEventListener ){
obj.addEventListener( type , fn ,false )
} else {
obj.attachEvent( 'on' + type , fn )
}
}
</script>
</body>
Animation.gif
滚轮事件 onmousewheel
可以作用在任何一个盒子上（不一定要有滚动条）
不兼容火狐
<style type="text/css">
/*清除样式*/
*{margin: 0;padding: 0;}
ul li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
/*---------------------------------------------------*/
#box{
overflow: hidden;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box">
是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地是是进介齐家务增进百埯地
</div>
<script type="text/javascript">
var oBox = document.getElementById( 'box' );
addEvent( oBox , 'mousewheel' , function(){
console.log( 2 )
})
function addEvent( obj , type ,eFn ){
function fn( e ){
eFn.call( obj , e )
}
if( window.addEventListener ){
obj.addEventListener( type , fn ,false )
} else {
obj.attachEvent( 'on' + type , fn )
}
}
</script>
</body>
滚轮事件
兼容火狐 只有用注册去绑定
obj.addEventListener( ' DOMMouseScroll' , fn )
<script type="text/javascript">
var oBox = document.getElementById( 'box' );
addEvent( oBox , 'DOMMouseScroll' , function(){
console.log( 2 )
})
function addEvent( obj , type ,eFn ){
function fn( e ){
eFn.call( obj , e )
}
if( window.addEventListener ){
obj.addEventListener( type , fn ,false )
} else {
obj.attachEvent( 'on' + type , fn )
}
}
</script>
Animation.gif
滚轮方向 e.wheelDelta 判断方位
不兼容火狐
1、120的倍数
2、往手心内是负 （ 向下滚 ）
3、往手机外是正 （ 向上滚 ）
<script type="text/javascript">
var oBox = document.getElementById( 'box' );
addEvent( oBox , 'mousewheel' , function( e ){
console.log( e.wheelDelta )
})
function addEvent( obj , type ,eFn ){
function fn( e ){
eFn.call( obj , e )
}
if( window.addEventListener ){
obj.addEventListener( type , fn ,false )
} else {
obj.attachEvent( 'on' + type , fn )
}
}
</script>
Animation.gif
兼容火狐 e.detail 判断方位
1、3的倍数
2、往手心内是正 （ 向下滚 ）
3、往手机外是负 （ 向上滚 ）
<script type="text/javascript">
var oBox = document.getElementById( 'box' );
addEvent( oBox , 'DOMMouseScroll' , function( e ){
console.log( e.detail )
})
function addEvent( obj , type ,eFn ){
function fn( e ){
eFn.call( obj , e )
}
if( window.addEventListener ){
obj.addEventListener( type , fn ,false )
} else {
obj.attachEvent( 'on' + type , fn )
}
}
</script>
兼容写法
<script type="text/javascript">
/*
兼容写法
思路:
火狐要用注册事件来添加 只有用addEventListener attachEvent 来添加
所以要先兼容添加事件的写法
*/
// document.onmousewheel = function (){
// }
addMouseWheel( document , function ( e , d ){
console.log( d );//通过判断d可以知道哪个方向
} )
function addMouseWheel( obj , eFn ){
function fn( e ){
e = e || window.e;
var d = e.wheelDelta/120 || -e.detail/3; //获取一下数值,把2个统一都变成1 统一为正数
eFn.call( obj , e , d );
}
if( document.addEventListener ){ //添加事件兼容
//走这里说明浏览器不是IE了 下来要判断一下是不是火狐
/* document.onmousewheel
在非火狐浏览器是null 注意 如果有存在 onmousewheel这个属性是null 只是空指针
在火狐浏览器是undefined
但如果有给 document.onmousewheel 添加事件 就不是null 所以要先在js里创建一个盒子 防止污染;
js里添加盒子不可能会被污染到
*/
var createBox = document.createElement( 'div' );
/*
if( createBox.onmousewheel === null ){
//说明不是火狐浏览器
obj.addEventListener( 'mousewheel', fn );
} else {
//火狐浏览器
obj.addEventListener( 'DOMMouseScroll' , fn )
}
*/
// 可以写成
obj.addEventListener( (createBox.onmousewheel === null ? 'mousewheel' : 'DOMMouseScroll' ) , fn )
} else {
obj.attachEvent( 'onmousewheel' , fn )
}
}
// 最简写法
/*
function addMouseWheel( obj , eFn ){
function fn( e ){
e = e || window.e;
var d = e.wheelDelta/120 || -e.detail/3;
eFn.call( obj , e , d );
}
if( document.addEventListener ){
var createBox = document.createElement( 'div' );
obj.addEventListener( (createBox.onmousewheel === null ? 'mousewheel' : 'DOMMouseScroll' ) , fn )
} else {
obj.attachEvent( 'onmousewheel' , fn )
}
}
* /
</script>
案例 图片放大缩小
<body>
<img src="1.JPEG" height="" width=""/>
<script>
var oImg = document.getElementsByTagName( 'img' )[0],
ImgW = oImg.offsetWidth;
addMouseWheel( document , function ( e , d ){
e = e || window.event;
ImgW -= d*5;
oImg.style.width = ImgW + 'px';
e.preventDefault ? e.preventDefault() : e.returnValue = false;
})
function addMouseWheel( obj , eFn ){
function fn( e ){
e = e || window.e;
var d = e.wheelDelta/120 || -e.detail/3;
eFn.call( obj , e , d );
}
if( obj.addEventListener ){
var createBox = document.createElement( 'div' );
obj.addEventListener( (createBox.onmousewheel === null ? 'mousewheel' : 'DOMMouseScroll' ) , fn )
} else {
obj.attachEvent( 'onmousewheel' , fn )
}
}
</script>
</body>
阻止选中onselectstart
addEvent( document , 'selectstart' , function( e ){
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false
})
区别鼠标左中右键
e.which 如果是1 鼠标左键 2鼠标中键 3鼠标右键
document.onmousedown = function ( e ) {
console.log( e )
}
image.png
document.onmousedown = function ( e ) {
if( e.which === 1 ){
alert( '我按下的鼠标左键' )
} else if ( e.which ===3 ){
alert( '我按下的鼠标右键' )
}
}
网友评论