鼠标事件深入

点击事件 = 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})()

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

DOM实现元素拖拽，滚轮事件和特效动画缓冲运动处理
目录元素拖拽实现(点击拖动可视屏幕任意位置) DOM滚轮事件处理滚轮事件绑定滚轮事件方向滚轮事件兼容滚轮缩放图片案例实现特效动画缓冲运动单向缓冲运动反复缓冲运动简单的封装透明度处 ...
Qt鼠标拖拽窗口移动事件
QT中实现窗口的拖拽主要利用的是三个事件的重写 mousePressEvent 重写后检测到鼠标按下左键时记录按下的point的坐标以及拖拽的窗口的坐标point mouseMoveEvent 重写后 ...
可拖拽，拉伸的盒子（类似我们的桌面应用框，可以拉伸放大，可以拖拽移动）
类似我们的桌面应用框,可以拉伸放大,可以拖拽移动基于上一篇,我们至于要加上另外两边和另外三个角只是剩下的拉伸,不仅仅要改变盒子的宽,还要改变left/top了原本以为很简单的加个left就好了, ...
理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
JavaScript(11) - 阻止事件冒泡和默认行为,拖拽,事件监听器
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.阻止事件冒泡和默认行为二.拖拽 1, 实现拖拽相关的三大事件: 2, 实现拖拽思路: 1, 给目标元素添加onmous ...
python鼠标拖拽功能_selenium鼠标移动、拖拽、双击、长按等操作
selenium鼠标操作靠的是ActionChains(行为链)类,前面的文章我们已经介绍过,详情可以看ActionChains类,selenium的鼠标操作就不一一举例了,本节把鼠标移动.拖拽.双击 ...
pc 端与移动端区分点击与拖拽事件
pc 端与移动端区分点击与拖拽事件 PC 端移动端在 html 的应用中,拖拽事件为 mousedown -> mousemove -> mouseup 三个事件组成,在一个有拖拽事件 ...
UnityUGUI[Slider]拖拽抬起事件
因为最近项目需要做个拖拽条,但是跟正常的不太一样所以需要一个拖拽抬起事件,但是Slider并没给自带的拖拽事件,而且Slider好像重写了EventSystem的IEndDragHandler的方法 ...
JS拖动事件（鼠标拖动事件）手指事件（PC移动端拖拽）
写了好几次的PC端和移动端的拖拽效果了,每次都要重新查阅资料,现在做个总结记录,方便以后随时查阅要想写拖拽事件,首先得了解三块知识点: PC的鼠标拖动事件移动端的手指事件能拿到被移动元素的高宽, ...

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

鼠标事件深入

边界问题

鼠标点击

多人协作插件开发

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

最新文章

热门文章