3：移动端的基本事件

1：基本事件       touchstart               mousedown

                         touchmove               mousemove

                          不可能单独触发    可以单独触发

                         touchend         mouseup

                 */

2：阻止事件的默认行为（复习一下冒泡）

      事件处理的三个阶段：捕获，冒泡，执行

      事件捕获：当使用事件捕获时，父级元素先触发，子元素后触发。

事件冒泡：当使用事件冒泡时，子级元素先触发，父元素后触发。

ev.preventDefault();//阻止事件的默认行为

ev.stopPropagation();//阻止事件冒泡

window.onload = function(){

                             //阻止事件的默认行为;

                             document.oncontextmenu = function(ev){

                                      ev = ev || event;

                                 return false;

                             }

                   //让box1的默认行为不被取消

                   var box1 = document.querySelector(".box1");

                    box1.oncontextmenu = function (ev){

                        ev = ev || event ;

                        ev.stopPropagation(); //阻止冒泡

                   }

 

//文档全面禁止默认行为，如果要当前使用的对象不禁止，阻止当前事情的冒泡就不会触发父元素的禁止默认行为的事件；

练习：自定义菜单 //取消默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				position: absolute;
				width: 200px;
				height: 400px;
				background-color: red;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			
		</div>
		<script type="text/javascript">
			window.onload = function(){
				
				var box1 = document.querySelector(".box1");
				document.oncontextmenu = function(ev){
					ev = ev|event;
					var x = event.pageX;
					var y = event.pageY;
					
					box1.style.left = x + "px";
					box1.style.top  = y + "px";
					box1.style.display= "block";
					
					return false;
					
				}
				document.onclick = function(){
					
					box1.style.display= "none";
				}
				
			}
		</script>
	</body>
</html>

　　

posted @ 2018-11-04 16:01  INSTANCE_SELF  阅读(310)  评论(0)    收藏  举报