默认行为 移动端用的多
默认行为:选中复制
- 选中文本事件document.onselectstart
document.onselectstart = function(){
console.log("选中");
}
每选择一次在控制台打印一次
- 右键点击出现菜单document.oncontextmenu
document.oncontextmenu = function(e){
e||window.event;
e.preventDefault();
console.log("右键菜单");
}
- e.preventDefault();取消默认行为 主流浏览器
<script type="text/javascript">
document.onselectstart = function(e){
e||window.event;
e.preventDefault();
console.log("选中");
}
</script>
ie不支持e.preventDefault默认取消 兼容方法 e.returnValue =false取消默认行为e.returnValue =true不取消
<script type="text/javascript">
document.onselectstart = function(e){
e||window.event;
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue =false;
}
console.log("选中");
}
滚轮事件封装
在火狐浏览器 只能通过add.EventLister()添加滚轮事件 其他浏览器可以使用on绑定
- event事件对象 e.wheelDalta 滚动方向
document.addEventListener("mousewheel",function (e) {
console.log("鼠标滚动了");
});
鼠标滚动了就会打印 拖动鼠标不会触发
document.addEventListener("mousewheel",function (e) {
console.log(e.wheelDelta);
});
e.wheelDelta保存了上下滚动的方向 向上就是120 向下是负120 滚动快时时240或者360
- IE浏览器e.wheelDalta没问题 但是不支持addEventListener
document.attachEvent("onmousewheel",function (e) {
console.log(e.wheelDelta);
});
- 火狐浏览器 DOMMouseScroll事件名 event事件对象下的detail 向上为-3 向下为3
document.addEventListener("DOMMouseScroll",function (e) {
console.log(e.detail);
});
- 其他浏览器进行鼠标的绑定
document.onmousewheel = function () {
console.log(1)
}
- 在控制台打印 在火狐中打印document.onmousewheel是undefined,在谷歌或者IE浏览器中是null
mousewheelEvent(document,function(){
console.log(this)
});
//鼠标滚轮事件
function mousewheelEvent(ele,fn,boole){
//判断是否为IE浏览器
if(ele.addEventListener){
//判断是否为火狐浏览器
if(ele.onmousewheel === undefined){//火狐
ele.addEventListener('DOMMouseScroll',fn,boole);
}else{//谷歌
ele.addEventListener('mousewheel',fn,boole);
}
}else if(ele.attachEvent){//ie浏览器
ele.attachEvent('onmousewheel',function(){
fn.call(ele);
});
}
}
</script>
图片放大
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
}
/* .box{
width: 100px;
height: 100px;
border: 1px solid ;
overflow: scroll;
} */
</style>
</head>
<body style="height: 1000px;">
<!-- <div class="box">
<div style="height: 300px;"></div>
</div>
-->
<img src="1.jpg" width="500" id="oImg">
<script type="text/javascript">
var maxWidth = 1200,
minWidth = 200;
mousewheelEvent(oImg,function(e){
e.stopPropagation();//取消事件传递
e.preventDefault();//默认行为
var num = e.wheelDelta / 120;//放大的倍数
//console.log(num,num > 0)
if(num > 0){
(oImg.width < maxWidth) && (oImg.width += 10*num)
}else{
(oImg.width > minWidth) && (oImg.width += 10*num)
}
//((num > 0) ? (oImg.width < maxWidth) : (oImg.width > minWidth)) && (oImg.width += 10*num);
},false);
//鼠标滚轮事件
function mousewheelEvent(ele,fn,boole){
//判断是否为IE浏览器
if(ele.addEventListener){
//判断是否为火狐浏览器
if(ele.onmousewheel === undefined){//火狐
ele.addEventListener('DOMMouseScroll',fn,boole);
}else{//谷歌
ele.addEventListener('mousewheel',fn,boole);
}
}else if(ele.attachEvent){//ie浏览器
ele.attachEvent('onmousewheel',function(){
fn.call(ele);
});
}
}
</script>
</body>