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

最新推荐文章于 2022-07-18 19:41:37 发布
最新推荐文章于 2022-07-18 19:41:37 发布
阅读量159 收藏
点赞数
分类专栏： 系统学习 # DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43503511/article/details/118066180
版权

鼠标事件深入

  • 点击事件 = 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">
最低0.47元/天 解锁文章
Stephy_Yy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM常用事件
zxn200125的博客
11-24 1032
什么是事件，DOM的常用事件有哪些
Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)
10-20
主要介绍了Javascript DOM事件操作,结合实例形式总结分析了javascript监听鼠标点击、释放，悬停、离开等操作技巧,需要的朋友可以参考下
DOM-15【鼠标事件深入-点击与拖拽分离-双击事件-协作开发】
小管打天下的博客
06-08 322
一、鼠标事件深入 （1）模块的两种写法 等待执行的模块 var dragNclick = (function (a, b) { console.log(a, b); }) dragNclick(1, 2) 立即执行的模块 init(); function init() { dragNclick; } var dragNclick = (function (a, b) { console.log(a, b); })(1, 2); （2）模块拖动案例 业务需求： 点击的时候跳
使用鼠标事件来实现拖拽
weixin_46544600的博客
07-07 252
其中涉及到的知识点 使用到的鼠标事件： mousedown：按下任意按钮是触发 mousemove：当鼠标指针在元素内部移动时重复触发 mouseup：释放鼠标按钮时触发 页面坐标位置： pageX；pageY 这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶点计算的。 <div style="position:absolute; cursor:pointer; width: 100px; height:100px; background-color: red; l
dom例子一(双击-走马灯-跳转)
菜园里的一只鸟
06-10 179
案例一 动态设置事件 双击按钮弹出对话框 ondblclick双击响应事件 &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt; function f1(){alert("1");} function f2(){window.alert("2")}; &lt;/script&gt; &l
深入理解DOM事件机制系列第四篇——事件模拟
weixin_34051201的博客
09-18 84
前面的话 　　事件是网页中某个特别的瞬间，经常由用户操作或通过其他浏览器功能来触发。但实际上，也可以使用javascript在任意时刻来触发特定的事件，而此时的事件就如同浏览器创建的事件一样。本文将详细介绍事件模拟   引入 　　以下面的实际需求为例，来详细说明事件模拟的使用。按钮一的点击效果是弹出1。而我们通过新增按钮二来模拟按钮一的效果 &lt;button id="btn1"&...
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
11-20
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 v-on:click 单击事件 <button class=” btn btn-info” v-on:click=”add(1)”> + + </button> <button class=” btn btn-...
jquery鼠标双击事件拖拽图片
04-07
在本文中，我们将深入探讨如何使用jQuery库来实现一个功能丰富的图片拖拽功能，特别是结合鼠标双击事件。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画制作，使得创建交互式网页变得更加...
simulate-dom-event:跨浏览器模拟dom事件
07-05
模拟 dom 事件跨浏览器模拟 dom 事件。 它仅适用于测试目的！例子 < script src =' index.js ' > </ script >< div id =' t '> </ div>< script > var t = document . getElementById ( 't' ) ; t...
同一个dom上加单击事件和双击事件的冲突解决办法，双击事件方法进不去
weixin_33887443的博客
01-04 342
data() { return { TimeFn:''//定义公用变量}} $(".proManage fieldset ul li").dblclick(function(){//双击播放项目 //双击事件执行的方法 　　this.TimeFn = ""}) $(".proManage fieldset ul li").click(function(){ if(_thi...
JS的DOM操作——事件类型
最新发布
m0_59345890的博客
07-18 985
2、ondblclick鼠标双击事件触发条件鼠标第一次按下和第二次松开时鼠标指针在被选元素区域内部并且时间间隔不能太长。10、onwheel鼠标滚轴滚动事件触发条件鼠标滚轴滚动时鼠标指针在被选元素内部。1、onclick鼠标点击事件触发条件鼠标按下和松开时，鼠标指针在被选元素区域内部。3、onmousedown鼠标按下事件触发条件鼠标在被选元素内按下。4、onmouseup鼠标松开事件触发条件鼠标在被选元素内松开。...
Notes:DOM的事件模拟
weixin_34117211的博客
11-02 72
首先使用document对象的createEvent方法创建一个事件对象，然后初始化该事件对象，接着使用支持事件DOM节点的dispatchEvent方法触发事件。 DOM2级事件和DOM3级事件有些不同，如下图所示，DOM2传给createEvent方法的字符串为英文复数，而DOM3则为单数。 下面为一个模拟点击事件的代码 show.addEventListener('click'...
DOM的事件模拟（摘）
weixin_30858241的博客
11-21 33
要确定浏览器是否支持DOM规定的HTML事件，可以使用如下代码： var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0"); 只有根据DOM2级事件实现这些事件的浏览器才返回true，以非标准方式支持这些事件的浏览器会返回false; 关于document.implemen...
DOM操作、事件、案例、节点、BOM
weixin_45134615的博客
08-13 247
DOM操作、事件、案例、节点、BOM 1.案例扩展 (1)、隔行换色 案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作） var btn = document.getElementById(“btn”); var liObj = document.getElementById(“list”).getElementsByTagName(“li”); console.log(liObj); btn.onclick = function () { //第一种 for .
JS 区别拖拉事件与点击事件
Bole_b的博客
12-14 929
在完成拖拉事件后，发现不能单纯用onclick来触发点击事件。拖拉的同时也就触发了点击。 故如何区分点击事件和拖动事件成为难题了。 继续变成菜鸟前端搬运工，找到了一篇有用的文章。附上链接：https://blog.csdn.net/Charles_Tian/article/details/79593241 上面也有详细的介绍，这里不多说了。直接上挂思路和实现代码： 思路: 1、先写出鼠标...
区分拖曳(drag)和点击(click)事件
weixin_30707875的博客
05-25 2013
假设页面上有一个a标签： <a href="http://www.google.com">google</a> 现在需要对这个标签进行拖放操作，会发现当拖曳完成后，该链接也同时被打开了，这并不是期望的结果，因为我们仅仅想将这个标签拖放到另一个位置而已。 最初很自然地想到了用preventDefault来阻止默认行为，可实际操作后发现这种方案不可行。 由于拖曳...
js原生操作Dom（模拟鼠标点击）
weixin_43456275的博客
03-11 4822
createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 添加：appendChild() 移出：removeChild() 替换：replaceChild(newNode,oldNode) 插入：insertBefore(newNode,oldNode) 复制：cloneNode(true) 查找： getElementsByTagName() //通过标签名称 getEleme
同一个dom元素下 单击事件覆盖双击事件的解决方法
u013269298的博客
09-21 1472
再写js的时候发现一个问题：  $("#button1").on("dbclick",function(){ //双击事件 }).on("click",function(){ //单击事件 }); 遇到如上情况的话单击事件会将双击事件覆盖掉,在网上找到一个解决方法,实验后可行： var clickTimes=0; //记录点击次数 $("#but

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值