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;
				 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>

  

原文地址:https://www.cnblogs.com/love-life-insist/p/9904282.html