DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件

鼠标事件深入

  • 点击事件 = mousedown + mouseup
  • position: absolute 会将内联元素变为块级(比如a)
  • a标签的协议限定符(伪协议,防止跳转和刷新,让href不生效),javascript:;,可以让点击和拖拽分离
  • 模块的声明:xx变量 = function () { } / IIFE
  • 等待型模块和立即执行的模块
  • 用按下、抬起的时间差值来判断是拖拽还是点击
    在这里插入图片描述
    在这里插入图片描述

边界问题

  • 浏览器可能有计算误差,可以适当将范围缩小1像素,防止出现滚动条

鼠标点击

  • 鼠标右键、中键没有onclick事件,有onmouseup事件
  • e.button 左中右分别对应012
  • IE10以上使用,否则就不要去添加这些事件了
  • 鼠标右键事件contextmenu
  • 模拟双击事件,两次点击的时间间隔 < 200ms

多人协作插件开发

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  • bind也可以,最简单
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>计算器</title>
</head><body><input type="text" id="input1"><input type="text" id="input2"><div class="btn-group"><button data-method="plus">+</button><button data-method="minus">-</button><button data-method="multi">*</button><button data-method="div">/</button></div><script src="../compat.js"></script><script src="js/index.js"></script><script>var oInput1 = document.getElementById('input1'),oInput2 = document.getElementById('input2'),btnGroup = document.getElementsByClassName('btn-group')[0];var calculator = new Calculator({oInput1,oInput2,btnGroup}).init()</script></body></html>
; (function () {var Calculator = function (opt) {this.oInput1 = opt.oInput1this.oInput2 = opt.oInput2this.btnGroup = opt.btnGroup}Calculator.prototype = {init: function () {this.bindEvent()},bindEvent: function () {var btns = this.btnGroupaddEvent(btns, 'click', this.compute.bind(this))},compute: function (e) {// this指向实例var num1 = parseInt(this.oInput1.value),num2 = parseInt(this.oInput2.value),e = e || window.event,tar = e.target || e.srcElementtagName = tar.tagName.toLowerCase();if (tagName === 'button') {var method = tar.getAttribute('data-method')switch (method) {case 'plus':console.log(num1 + num2)break;case 'minus':console.log(num1 - num2)break;case 'multi':console.log(num1 * num2)break;case 'div':console.log(num1 / num2)break;}}}}window.Calculator = Calculator})()

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251059.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

scrapy的操作

转载于:https://www.cnblogs.com/mengqingjian/p/8337772.html

Devexpress xaf针对某个用户登录后在面板中设置导航无效的解决方法

Devexpress xaf框架生成的项目默认情况下导航栏是显示在左侧&#xff0c;有时候我们用某个账户登录后&#xff0c;发现导航栏无法显示在左侧&#xff0c;操作十分不方便。我们可以去数据库删除当前登录用户的自定义布局 解决方法如下: 1、查询PermissionPolicyUser用户表&#…

DOM-13 【实战】输入及状态改变事件、京东搜索框

模块化 IIFE window.onload function () {init() }function init() {keySearch()others() // 多人开发的模块 }var keySearch (function () {var searchKw document.getElementById(J_search_kw),autoKw document.getElementById(J_autoKw),recomKw JSON.parse(document…

吴恩达“机器学习”——学习笔记二

定义一些名词 欠拟合&#xff08;underfitting&#xff09;&#xff1a;数据中的某些成分未被捕获到&#xff0c;比如拟合结果是二次函数&#xff0c;结果才只拟合出了一次函数。 过拟合&#xff08;overfitting&#xff09;&#xff1a;使用过量的特征集合&#xff0c;使模型过…

Http 概述

Http是可靠的数据传输协议。资源Web服务器是Web资源&#xff08;resource&#xff09;的宿主。包括静态文件以及动态的内容。 媒体类型Http对每种需要由web传输的对象都打上了名为MIME类型的数据格式标签。主要的mime类型: text/htmltext/plainimage/jpegimage/gifvideo/quickt…

DOM-14 【实战】解决事件代理和鼠标移动事件的窘态

鼠标的滑入滑出 案例 事件现象应用场景mouseover/mouseout绑定在父元素时&#xff0c;对她的所有子元素&#xff0c;事件都生效dom结构简单mouseenter/mouseleave只对她绑定的元素有效&#xff0c;对window绑定无效dom结构简单mousemove长触发dom结构复杂// 绑定在父元素上 /…

javascript --- 再读作用域和闭包

执行环境: // 定义了变量或函数有权访问的其他数据,决定了它们各自的行为 // 每个执行环境都有一个与之关联的变量对象 // 执行环境中定义的所有变量和函数都保存在这个变量中执行环境与函数: // 每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就会被推入一个…

DOM-15/16【实战】鼠标行为预测技术

鼠标预测行为动作复杂&#xff0c;使用事件代理得不偿失&#xff0c;在数量有限的情况下&#xff0c;使用循环绑定更好用户从menu斜着向右下角滑入时&#xff0c;可能是进入main&#xff0c;也可能是要选择子菜单&#xff0c;在判断前先做延迟如何判断用户进入main的意图&#…

ES6-1 ES6版本过渡历史

一 历史 HTML HTML 1, HTML 2, HTML 3 1991-1997 IETF(the Internet Engineering Task Force) 国际互联网工程任务组1997.1 HTML3.2 W3C JavaScript 1995 liveScript(后改名为JavaScript1996年改名)1996 javascript 1.0 1.1;1997 Jscript1997.6 ECMAScript 1.01998.6 ECMAS…

Django-model进阶

知识预览 QuerySet中介模型查询优化extra整体插入回到顶部QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 。它等同于SQL 的LIMIT 和OFFSET 子句。 1>>> Entry.objects.all()[:5] # (LIMIT 5)>>> Entry.objects.all()[5:10] # (OFFSE…

ES6-2 块级作用域与嵌套、let、暂行性死区

注意&#xff0c;写在开头 function test(x 1) {var x // 不报错console.log(x) } function test1(x 1) {let x 10 // 报错console.log(x) }let的变量名不可以和参数中的名称相同。而var并不限制&#xff0c;说白了就是希望你规范使用变量名。 形参原则上数组函数内部的临…

常用的操作系统知识

为什么要有操作系统 现代计算机系统是由一个或者多个处理器&#xff0c;主存&#xff0c;磁盘&#xff0c;打印机&#xff0c;键盘&#xff0c;鼠标显示器&#xff0c;网络接口以及各种其他输入&#xff0c;输出设备组成的复杂系统&#xff0c;每位程序员不可能掌握所有系统实现…

vue --- 使用中央事件总线(bus)实现跨组件通信

使用Bus实现跨组件传输须注意以下3点: 1.需要创建一个空的Vue实例(bus),来作为中间站 2.使用bus.emit来发送事件3.使用bus.emit来发送事件 3.使用bus.emit来发送事件3.使用bus.on来监听事件(在钩子created中监听) 代码如下: <!DOCTYPE html> <html> <head>…

vue --- 获取子组件数据的一个应急方案$refs

使用$refs需要注意以下2点: 1.html方法使用子组件时,需使用ref “xxx” 声明. 2.在父组件中使用,this.refs.xxx.msg 获取数据 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> </head> <body><div id"app"…

ES6-4/5 解构赋值、函数默认值、数组解构、对象解构

ES-4 解构赋值、函数默认值、数组解构、对象解构 ES-5 隐式转换、函数参数解构、解构本质、()用法 一 解构赋值 1 虚值 含义&#xff1a;在Boolean转换结果为假的值falsy 2 函数默认值 ES6 内部使用严格相等运算符&#xff08;&#xff09;&#xff0c;判断一个位置是否有值…

echarts --- 多折线图按段显示颜色规则订制

描述: 图中有4个序列,序列1和序列2在同一个x轴下,显示不同的颜色.(如,在-40到-30,序列一是红色,而序列2是黑色) 关键: VisualMap中的seriesIndex属性(根据不同的系列,制定不同的颜色规则). 下面是代码,可以直接复制到 echart实例 中进行调试 var symbolSize 20; var data [[…

ES6-6 - this指向、箭头函数基本形式、rest运算符

一 chrome断点调试 观察函数调用栈 // 25min var x 1; function foo(x, y function () { x 2; console.log(2) }) {var x 3;y();console.log(x) } foo() console.log(x) // 2 3 1var x 1; function foo(x, y function () { x 2; console.log(x) }) {x 3;y();console.…

ES6-7 - 箭头函数的实质、箭头函数的使用场景

箭头函数返回对象 // 这种情况要要用(),否则会将对象的{}解释为块 const fn (a, b) > ({a:1, b:2})箭头函数的特点 this指向由外层函数的作用域来决定&#xff0c;它本身没有this&#xff0c;不能通过call、apply、bind改变不能作为构造函数使用不可以使用arguments对象&…

javasript --- 一个日期规范(x秒前,x分前...)

Time函数(通俗易懂,自己根据实际需求修改吧- -) // time.js var Time {// 获取当前时间戳getUnix: function () {var date new Date();return date.getTime();},// 获取今天0点0分0秒的时间戳getTodayUnix: function () {var date new Date();date.setHours(0);date.setMin…

ES6-8 - 函数名/对象拓展、描述符、getter/setter

函数名 有两种特殊情况&#xff1a;bind方法创造的函数&#xff0c;name属性返回bound加上原函数的名字&#xff1b;Function构造函数创造的函数&#xff0c;name属性返回anonymous。 bind函数名 // 以bound开头 function foo() { } const fnName foo.bind().name console.lo…