DAY12-Event事件下


第一节

浏览器的默认行为

提交表单的时候,浏览器会根据action属性进行跳转,这个动作就是“浏览器的默认动作”

常见的默认行为
链接<a href="/index.php">点我</a>  往属性href指定的地址跳转
提交按钮<input type=”submit”>   往form表单属性action指定的地址跳转

通过事件对象阻止默认行为.

通用方法:
e.preventDefault();
说明:preventDefault是事件对象Event的一个方法,作用是取消一个目标元素的默认行为。如果元素没有默认行为,调用无效。
IE则是使用:
e.returnValue = false;

也可以用 return false;不仅返回值也会停止代码向下执行

阻止默认行为的函数封装

function stopDefault(event) {
    var e = event || window.event; 
    if (e.preventDefault){
        e.preventDefault();   // 标准浏览器
    }else{
        e.returnValue = false; // IE浏览器
    }
}

例1:阻止a标签的跳转行为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	</style>
</head>
<body>
   <a href="demo.html" id="form">点击跳转</a>
<script>
     var fo = document.getElementById('form');
         fo.onclick = stopDefault;
      function stopDefault(evnet){
          var e = event || window.event;
          if(e.preventDefault){
              e.preventDefault();
          }else{
              e.returnValue = false;
          }
      }
</script>
</body>
</html>

例2:阻止表单的提交行为

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	</style>
</head>
<body>
	<form action="come.html" id="form">
		<input type="text" name="">
		<input type="submit" value="提交">
	</form>
<script>
     var fo = document.getElementById('form');
         fo.onsubmit = stopDefault;
      function stopDefault(evnet){
          var e = event || window.event;
          if(e.preventDefault){
              e.preventDefault();
          }else{
              e.returnValue = false;
          }
      }
</script>
</body>
</html> 

事件的监听器[掌握]

事件就是用户或者浏览器自身执行某种动作,比如click、load、mouseover。
而响应某个事件的函数就叫做事件处理程序(事件监听器),

DOM0级事件处理程序的名字以on开头,click=>onclick、load=>onload,change=onChange

DOM2级事件

ie6、7、8
	添加DOM2级:节点对象.attachEvent(事件类型,事件处理)
	取消DOM2级:节点对象.detachEvent(事件类型,事件处理)
主流浏览器
	添加DOM2级:节点对象.addEventListener(事件类型,事件处理,[事件流])
	取消DOM2级:节点对象.removeEventListener(事件类型,事件处理,[事件流])
	
	    事件流指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序,主要是冒泡和捕获.

脚下留心

ie6、7、8事件类型需要“on”,主流浏览器不需要“on”
如果设置事件时,明确知道该事件需要取消,这时候只能写有名函数
设置事件和取消事件的格式必须一一对应

例1:设置和取消DOM2级事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>
        不吃苦中苦,难成人上人.
    </p>
    <input type="button" value="取消事件" onclick="reFn()" >
    <script>
      // DOM2级事件
      var pObj = document.querySelector('p');
      // 主流浏览器要去掉on
      pObj.addEventListener('click',addFn)
    
      function addFn(){
          alert('DOM2级事件绑定上了')
      }

      // 取消DOM2级事件
     function reFn(){
         pObj.removeEventListener('click',addFn)
     }
    </script>
</body>
</html>

例2:使用DOM0和DOM2的三种凡是分别同时设置3个事件,查看效果

DOM0级动态绑定事件

通过DOM0级添加同类型的事件,只能是最后一个事件处理起作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="one">回眸一笑百媚生</div> 
    <br />
    <div id="two">六宫粉黛无颜色</div>
     
    <script>
    // 给id=one绑定三个dmo0级事件
    var oneObj = document.querySelector('#one');
        oneObj.onclick =function(){
            alert('DOM1第一次');
        }
       
        oneObj.onclick =function(){
            alert('DOM1第二次');
        }

        oneObj.onclick =function(){
            alert('DOM1第三次');
        }
       
    // 给id=two绑定三个dom2级事件
    var twoObj = document.querySelector('#two');
       twoObj.addEventListener('click',fn1);
       twoObj.addEventListener('click',fn2);
       twoObj.addEventListener('click',fn3);

       function fn1(){
           alert('DOM2第一次')
       }
       function fn2(){
           alert('DOM2第二次')
       }
       function fn3(){
           alert('DOM2第三次')
       }

       // 总结:使用DOM1级绑定三个相同事件,只有最后一个触发,前面被覆盖了
       // DOM2级绑定的三个事件,则会依次出发
    </script>
</body>
</html>

DOM2级事件

DOM2级事件好处

DOM2级事件给设置多个同类型的事件.

DOM2级事件可以处理事件流.

DOM2级事件的函数封装
    function addEvent(obj,inci,back){
        if(obj.addEventListener){
            obj.addEventListener(inci,back);
        }else if(obj.attachEvent){
            obj.attachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = back;
        }
    }
          
    function removeEvent(obj,inci,back){
        if(obj.removeEventListener){
            obj.removeEventListener(inci,back,false);
        }else if(obj.detachEvent){
            obj.detachEvent("on" + inci,back);
        }else{
            obj["on"+inci] = null;
        }
    }
事件流(了解)

事件捕获:不太具体的节点应该更早的接收到事件,而最具体的节点,应该最后接收到事件

三种状态:

事件冒泡

事件捕获

目标阶段

捕获型(从外向里).先执行

冒泡型(从里向外),后执行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ctaszaGH-1662550160324)(/1589534610013.png)]

第二节:练习与应用

1.掌握兼容问题
<!docEventType html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
window.onload=function(){

	var EventUtil={
		addHandler:function(DOM,EventType,fn){
			if(DOM.addEventListener){
				DOM.addEventListener(EventType,fn,false);
			}else if(DOM.attachEvent){
				DOM.attachEvent('on'+EventType,fn)
			}else{
				DOM['on'+EventType]=fn
			}
		},
		removeHandler:function(DOM,EventType,fn){
			if(DOM.removeEventListener){
				DOM.removeEventListener(EventType,fn,false)
			}else if(DOM.detachEvent){
				DOM.detachEvent('on'+EventType,fn)
			}else{
				DOM['on'+EventType]=null;
			}
		}
	}

	
	var oDiv=document.getElementById('div');
	var fnAlert=function(){
		alert(1)
	}
	EventUtil.addHandler(oDiv,'click',fnAlert);
	EventUtil.removeHandler(oDiv,'click',fnAlert)
}
</script>
</head>
<body>
	<div id="div">123</div>
</body>
</html>
2.自定义右键菜单

oncontextmenu 事件在元素中用户右击鼠标时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			ul{width: 100px;height: 500px;background: #eee;border: solid 1px #ccc;display: none;position: absolute;margin: 0;}
		</style>
	</head>
	<body>

		<ul>
			<li>link1</li>
			<li>link2</li>
			<li>link3</li>
		</ul>
	</body>
	<script type="text/javascript">
		var oul = document.querySelector("ul")
		
		document.oncontextmenu = function(eve){
//			console.log(1)
			var e = eve || window.event;
			
			oul.style.display = "block"
			oul.style.left = e.clientX + "px";
			oul.style.top = e.clientY + "px";
			
			stopDefault(e)
//			return false;
		}
		
		
		function stopDefault(e){
			if(e.preventDefault){
				e.preventDefault()
			}else{
				e.returnValue = false
			}
		}
		
		
		document.onclick = function(){
			oul.style.display = "none";
		}
	</script>
</html>

第三讲:

事件委托机制[掌握]

场景
     有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。
原理
  事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div,有这样一个机制,那么我们给最外面的div加点击事件,那么里面的ul,li,a做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件.
   这里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发,当然,这里当点击ul的时候,也是会触发的,那么问题就来了,如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办,比如说只有点击li才会触发,不怕,我们有绝招:

好处:减少对DOM的操作.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VuO9Ynbt-1662550160325)(/1568686645101.png)]

实现方法
Event对象提供了一个属性叫target,可以返回事件的目标节点,我们成为事件源,也就是说,target就可以表示为当前的事件操作的dom.当前点击的dom
用法:
window.onload = function(){
    var oUl = document.getElementById("ul1");
    oUl.onclick = function(ev){
           var ev = ev || window.event;
           // 获取当前点击的标签
           var target = ev.target || ev.srcElement;
           console.log(target)
           console.log(target.nodeName)
           // 获取标签的名字
            if(target.nodeName.toLowerCase() == 'li'){
                  alert(123);
             alert(target.innerHTML);
             }
     }
}

例:点击某一个 Li 标签时,将 Li 的背景色显示在 P 标签内,并将 P 标签中的文字颜色设置成 Li 的背景色

HTML代码

 <ul class="palette">
                <li style="background-color: red">111</li>
                <li style="background-color:blue">222</li>
                <li style="background-color:yellow">333</li>
                <li style="background-color:black">444</li>
            </ul>
             <p class="color">11222</p>

传统实现方式

       // 传统方法实现绑定事件
            var list = document.querySelectorAll("li");
            for (var i = 0, len = list.length; i < len; i++) {
                list[i].onclick = function(e) {
                    var t = e.target;
                    var c = t.style.backgroundColor;
                    var p = document.getElementsByClassName("color")[0];
                    p.innerHTML = c;
                    p.style.color = c;
        
                }
            }

使用事件委托机制

            var ulist = document.getElementsByClassName('palette')[0];
                 ulist.onclick = function(event){
                    var ev = event || window.event;
                    // 返回当前真正点击的节点
                    var target = ev.target || ev.srcElement;
                    //console.log(target);
                    //根据节点名称判断当前点击的是否为Li
                    if(target.nodeName.toLowerCase()=='li'){
                         // 获取li的背景颜色
                         var  c= target.style.backgroundColor;
                         //获取p标签
                         var p=document.getElementsByClassName('color')[0];
                         p.innerHTML = c;
                         p.style.color = c;
                    }
                  //  console.log()

                }
 
     因为把事件绑定到了父节点上,因此省了绑定事件。就算后面新增的子节点也有了相关事件,删除部分子节点不用去销毁对应节点上绑定的事件
    父节点是通过event.target来找对应的子节点的。(事件处理程序中的this值始终等于currentTarget的值,指向的是绑定到的那个元素)

拖拽效果

onmousedown/onmousemove/onmouseup

步骤分析

   拖拽分解:
        按下鼠标 ----> 移动鼠标 ----> 松开鼠标

    1.给目标元素添加onmousedown事件,拖拽的前提是在目标元素按下鼠标左键

    2.当onmousedown发生以后,此刻给document添加onmousemove事件,意味着此刻鼠标在网页的移动都将改变目标元素的位置

    3.在onmousemove事件中,设定目标元素的left和top,
    公式
    目标元素的left = 鼠标的clientX – (鼠标和元素的横坐标差,即offsetX)
    目标元素的top = 鼠标的clientY– (鼠标和元素的纵坐标差,即offsetY)

    4.当onmousedown发生以后,此刻给document添加onmouseup事件,意味着此刻鼠标在网页的任意位置松开鼠标,都会放弃拖拽的效果
    在onmouseup事件中,取消document的onmousemove事件即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0rO0YSu-1662550160326)(/1568705196482.png)]

例:div元素的拖拽

  <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 0;}
		</style>
	</head>
	<body>
		<div id="box">hello world</div>
	</body>
	<script type="text/javascript">
		var obox = document.getElementById("box")
		// documentElement  返回根节点
		var clientW = document.documentElement.clientWidth
		var clientH = document.documentElement.clientHeight
		
		obox.onmousedown = function(eve){
			var e = eve || window.event;
//			鼠标按下的一瞬间获取到,鼠标在当前元素身上的坐标
			var disX = e.offsetX;// 相对于容器的横坐标
			var disY = e.offsetY;
			document.onmousemove = function(eve){
				var e = eve || window.event;
//				移动的时候,计算left和top
				var l = e.clientX - disX;  // clientX 鼠标指针的位置
				var t = e.clientY - disY;
//				边界限定
				if(t<0) t=0;
				if(l<0) l=0;
				if(l>clientW - obox.offsetWidth) l=clientW - obox.offsetWidth
				if(t>clientH - obox.offsetHeight) t=clientH - obox.offsetHeight
//				生效位置
				obox.style.left = l + "px";
				obox.style.top = t + "px";
			}
//			抬起的时候,清除事件
			document.onmouseup = function(){
				document.onmousemove = document.onmouseup = null;
			}
			// 默认阻止选中拖块的字
			if(e.preventDefault){
				e.preventDefault()
			}else{
				e.returnValue = false
			}
		}
		
		
	</script>
</html>

鼠标滚轮事件(了解)

onwheel 事件在鼠标滚轮在元素上下滚动时触发

以前的叫法:onmousewheel

e.wheelDelta //IE/Opera/Chrome

滚轮往上走就是:150

滚轮往下走就是-150

Firefox DOMMouseScroll 必须用addEventListener来实现绑定

evnet.detail

滚轮往上走:就是-3

滚轮往下走:就是3

<body>
        <p>
                <label for="wheelDelta"> 滚动值:</label>(IE/Opera)
                <input type="text" id="wheelDelta" />
            </p>
            <p>
                <label for="detail"> 滚动值:(Firefox)</label>
                <input type="text" id="detail" />
            </p>
            <script type="text/javascript">
                var scrollFunc = function(e) {
                    // e是FF的事件。window.event是chrome/ie/opera的事件
                    var ee = e || window.event;
                    // console.log(ee); //可以看看ee.wheelDelta和e.detail在浏览器中的值;
                    var t1 = document.getElementById("wheelDelta");
                    var t2 = document.getElementById("detail");
                    if(ee.wheelDelta) { //IE/Opera/Chrome   
                        t1.value = ee.wheelDelta;
                    } else if(ee.detail) { //Firefox    
                        t2.value = ee.detail;
                    }
                }
                /*注册事件*/
                if(document.addEventListener) {
                    //W3C FF
                    document.addEventListener('DOMMouseScroll', scrollFunc, false);
                } 
                //IE/Opera/Chrome/Safari
                window.onwheel = document.onwheel = scrollFunc; 
            </script>
</html>

练习与应用

2.登录窗口的拖拽

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .login-header {
      width: 100%;
      text-align: center;
      height: 30px;
      font-size: 24px;
      line-height: 30px;
    }

    ul,
    li,
    ol,
    dl,
    dt,
    dd,
    div,
    p,
    span,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a {
      padding: 0px;
      margin: 0px;
    }

    .login {
      width: 512px;
      height: 280px;
      position: absolute;
      border: #ebebeb solid 1px;
      left: 50%;
      right: 50%;
      background: #ffffff;
      box-shadow: 0px 0px 20px #ddd;
      z-index: 9999;
    left: 500px;
    top: 140px;
      display: none;
    }

    .login-title {
      width: 100%;
      margin: 10px 0px 0px 0px;
      text-align: center;
      line-height: 40px;
      height: 40px;
      font-size: 18px;
      position: relative;
      cursor: move;
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .login-input-content {
      margin-top: 20px;
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .login-button {
      width: 50%;
      margin: 30px auto 0px auto;
      line-height: 40px;
      font-size: 14px;
      border: #ebebeb 1px solid;
      text-align: center;
      -moz-user-select: none;
      /*火狐*/
      -webkit-user-select: none;
      /*webkit浏览器*/
      -ms-user-select: none;
      /*IE10*/
      -khtml-user-select: none;
      /*早期浏览器*/
      user-select: none;
    }

    .login-bg {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0px;
      left: 0px;
      background: #000000;
      filter: alpha(opacity=30);
      -moz-opacity: 0.3;
      -khtml-opacity: 0.3;
      opacity: 0.3;
      display: none;
    }

    a {
      text-decoration: none;
      color: #000000;
    }

    .login-button a {
      display: block;
    }

    .login-input input.list-input {
      float: left;
      line-height: 35px;
      height: 35px;
      width: 350px;
      border: #ebebeb 1px solid;
      text-indent: 5px;
    }

    .login-input {
      overflow: hidden;
      margin: 0px 0px 20px 0px;
    }

    .login-input label {
      float: left;
      width: 90px;
      padding-right: 10px;
      text-align: right;
      line-height: 35px;
      height: 35px;
      font-size: 14px;
    }

    .login-title span {
      position: absolute;
      font-size: 12px;
      right: -20px;
      top: -30px;
      background: #ffffff;
      border: #ebebeb solid 1px;
      width: 40px;
      height: 40px;
      border-radius: 20px;
    }
  </style>
</head>

<body>
  <div class="login-header">
    <!--如果a的href属性值中.协议名是javascript. 那么点击a标签的时候,就会执行:后面的代码-->
    <a id="link" href="javascript:;">点击,弹出登录框</a>
  </div>
  <div id="login" class="login">
    <div id="title" class="login-title">登录会员
      <span>
        <a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a>
      </span>
    </div>
    <div class="login-input-content">
      <div class="login-input">
        <label>用户名:</label>
        <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
      </div>
      <div class="login-input">
        <label>登录密码:</label>
        <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
      </div>
    </div>
    <div id="loginBtn" class="login-button">
      <a href="javascript:void(0);" id="login-button-submit">登录会员</a>
    </div>
  </div>
  <!-- 遮盖层 -->
  <div id="bg" class="login-bg"></div>


</body>

</html>
<script>
  // 1 获取节点
  var loginObj = document.getElementById('login');
  var bgObj    = document.getElementById('bg');
  var titleObj  = document.getElementById('title');
  var aObj      =  document.getElementById('link');
  // 获取屏幕的宽度和高度
  var cliW = document.documentElement.clientWidth;
  var cliH =  document.documentElement.clientHeight;

  // 2 点击登陆时,设置登录框和遮罩层的样式
  aObj.onclick = function(){
      loginObj.style.display = 'block';
      bgObj.style.display = 'block';
  }
  // 3 给登录框的头部,绑定鼠标按下事件
titleObj.onmousedown = function(event){
    var e = event || window.event;
      // 4 获取鼠标在元素中位置,方便后续计算登录框的位置
      var loginMX = e.offsetX;
      var loginMY = e.offsetY;
        // 5 给documen绑定移动事件
      document.onmousemove = function(eve){
          var ee = eve || window.event;
            // 6 获取实时的鼠标的位置
            var mouTmpX = ee.clientX;
            var mouTmpY = ee.clientY;
             // 7  计算并且判断,登录框的位置值
             var loginPosL = mouTmpX-loginMX;
             var loginPosT = mouTmpY - loginMY;
             /********设置边界问题************/
             // 宽度的设置
              if(loginPosL<0){  //最小值判断
                loginPosL =0;
              }
              // 最大的宽度值,屏幕宽-div的宽
              var maxW = cliW-titleObj.offsetWidth-21;
              if(loginPosL>maxW){  // 判断最大值
                loginPosL = maxW;
              }
              //高度的设置,注意关闭按钮的操作
              if(loginPosT<21) loginPosT=21;
              //计算最大高度
              var maxH = cliH-loginObj.offsetHeight;
              if(loginPosT>maxH) loginPosT = maxH;
   
               // 8 设置登录框的位置
               loginObj.style.top = loginPosT+'px';
               loginObj.style.left = loginPosL+'px';

      }
}

// 当鼠标弹起时,清除document上的移动事件
// 这样如果鼠标除了titleObj,再松开,就不能监听到up事件
// titleObj.onmouseup = function(){
//     document.onmousemove = null;
// }
// 在页面中,任何地方松开,都可以检测到
document.onmouseup = function(){
    document.onmousemove = null;
}



</script>

3.**扩展案例:**拖拽轨迹回放

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0035)http://fgm.cc/learn/lesson6/01.html -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>完美拖拽</title>
  <style type="text/css">
    html,
    body {
      overflow: hidden;
    }

    body,
    div,
    h2,
    p {
      margin: 0;
      padding: 0;
    }

    body {
      color: #fff;
      background: #000;
      font: 12px/2 Arial;
    }

    p {
      padding: 0 10px;
      margin-top: 10px;
    }

    span {
      color: #ff0;
      padding-left: 5px;
    }

    #box {
      position: absolute;
      width: 300px;
      height: 150px;
      background: #333;
      border: 2px solid #ccc;
      top: 50%;
      left: 50%;
      margin: -75px 0 0 -150px;
    }

    #box h2 {
      height: 25px;
      cursor: move;
      background: #222;
      border-bottom: 2px solid #ccc;
      text-align: right;
      padding: 0 10px;
    }

    #box h2 a {
      color: #fff;
      font: 12px/25px Arial;
      text-decoration: none;
      outline: none;
    }
  </style>
  <script type="text/javascript">
    window.onload = function () {
      var positionArray = [];

      var box = document.getElementById("box");
      box.onmousedown = function (evt) {

        positionArray = [];
        var x = evt.offsetX;
        var y = evt.offsetY;
        document.onmousemove = function (evt) {

          box.style.left = evt.clientX - x + "px";
          box.style.top = evt.clientY - y + "px";
          //console.log({ left: box.offsetLeft, top: box.offsetTop })
          positionArray.push({ left: box.offsetLeft, top: box.offsetTop });

        }
      }

      box.onmouseup = function () {
        document.onmousemove = null;
        console.log(positionArray);

      }
      // 冒泡:触发父级元素的同类型事件
      // 给a标签绑定mousedown,阻止其冒泡到div上
      box.children[0].firstElementChild.onmousedown = function (e) {
        var eve = e || window.event;
        eve.stopPropagation();
      }

      box.children[0].firstElementChild.onclick = function (eve) {
        var e = eve || window.event;
        e.stopPropagation();
        // console.log(1111);
        var index = positionArray.length - 1;
        console.log(positionArray);
        var timer = setInterval(function () {


          if (index < 0) {
            clearInterval(timer);
            return;
          }
          box.style.left = positionArray[index--].left + "px";
          box.style.top = positionArray[index--].top + "px";

        }, 30);


      }
    };
  </script>
</head>

<body>
  <div id="box" style="margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;">
    <h2>
      <a href="javascript:;">点击回放拖动轨迹</a>
    </h2>
    <p>
      <strong>Drag:</strong>
      <span>false</span>
    </p>
    <p>
      <strong>offsetTop:</strong>
      <span>231</span>
    </p>
    <p>
      <strong>offsetLeft:</strong>
      <span>533</span>
    </p>
  </div>


</body>

</html>

More

表达重复提交

web表单常见的问题就是用户常常两次点击提交按钮,在设计扣款的情况下这是很严重的问题.

可以通过监听submit事件,在第一次提交后仅用提交按钮

		<form action="" method="post" name="form2"  >
		  <input type="text" name="pwd" id="" value="" />
			<input type="text" name="user" id="" value="" />
			<input type="submit" name="sub-btn" value=" 提交" />
		</form>

		<script type="text/javascript">
			// console.log(document.forms[0]);
	  //      function fn(eve){
			//   var e =  eve || window.event;  
			// }     
			  document.forms[0].addEventListener('submit',eve=>{
				eve.preventDefault();
				var btn =   eve.target.elements['sub-btn'];
				btn.disabled = true;
			  })

作业:

1 实现元素的拖拽

tyle=“margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;”>


点击回放拖动轨迹



Drag:
false



offsetTop:
231



offsetLeft:
533

```

More

表达重复提交

web表单常见的问题就是用户常常两次点击提交按钮,在设计扣款的情况下这是很严重的问题.

可以通过监听submit事件,在第一次提交后仅用提交按钮

		<form action="" method="post" name="form2"  >
		  <input type="text" name="pwd" id="" value="" />
			<input type="text" name="user" id="" value="" />
			<input type="submit" name="sub-btn" value=" 提交" />
		</form>

		<script type="text/javascript">
			// console.log(document.forms[0]);
	  //      function fn(eve){
			//   var e =  eve || window.event;  
			// }     
			  document.forms[0].addEventListener('submit',eve=>{
				eve.preventDefault();
				var btn =   eve.target.elements['sub-btn'];
				btn.disabled = true;
			  })

作业:

1 实现元素的拖拽

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值