javascript--34--默认行为和滚动事件

最新推荐文章于 2024-02-10 09:00:00 发布

lxhby520

最新推荐文章于 2024-02-10 09:00:00 发布

阅读量593

点赞数

分类专栏：小白 html javascript

本文链接：https://blog.csdn.net/lxhby520/article/details/80909931

版权

小白同时被 3 个专栏收录

37 篇文章 0 订阅

订阅专栏

javascript

33 篇文章 0 订阅

订阅专栏

html

15 篇文章 2 订阅

订阅专栏

默认行为移动端用的多

默认行为：选中复制

选中文本事件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>

垂直滚动案例

lxhby520

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript--34--默认行为和滚动事件

默认行为移动端用的多默认行为：选中复制选中文本事件document.onselectstartdocument.onselectstart = function(){ console.log("选中"); }每选择一次在控制台打印一次右键点击出现菜单document.oncontextmenudocument.oncontextmenu = function(e){ ...
复制链接

扫一扫