首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件

js 的单双击事件同时存在会有一个问题:双击事件会同时触发单击事件,两个事件存在冲突。 我们加一个延迟时间就能很好的解决这个问题。...原理: 当接收到第一个点击时,我们先把单击事件存储在这个是全局变量 click_store 里,如果 0.3 秒内没有接收到双击事件,就去执行它,如果接收到了,我们把它清理掉,然后去执行双击事件。...var click_store // 定义一个全局变量存储单击触发事件 document.addEventListener('click', deal_click); document.addEventListener...('dblclick', deal_dblclick); function deal_click(e){ click_store = setTimeout(function(e){ // 单击触发事件...,0.3s延迟 ... },300); } function deal_dblclick(e){ // 单击事件清理 clearTimeout(click_store); // 双击触发事件

6.1K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    双击事件单击事件的那些事

    双击事件单击事件的那些事 前言 项目遇到了双击事件会同时触发单击事件的bug,还是简单记录一下。 心里话:日更太累了。以前都是单独花好几天的时间去看别人的博客,看很多博客后再慢慢输出。..."); } function mydblclick() { console.error("双击事件"); } 图片 合情合理,双击事件也是两次点击事件,所以同时会触发单击事件click和双击事件...但是需求是单击和双击不同的处理,所以双击的时候不应该触发单击事件。 解决方案 思路:可以使用函数防抖的做法,单击事件触发后,开启一个定时器,双击事件触发的话就清除定时器。...el-checkbox使用注意点 双击事件单击事件的问题处理完了,再加上一下下项目的踩坑点。 el-checkbox没有事件对象,平常的事件对象el-checkbox上是布尔值,表示是否选中。...checked.value; } 图片 可以直接修改绑定值的同时,手动调用change事件的处理函数来模拟触发change事件,不过,事件对象的传参就不太好模拟了。

    3.8K30

    HarmonyOS实战—实现单击事件流程

    什么是事件? 事件就是可以被识别的操作 。就是可以被文本、按钮、图片等组件识别的操作。 常见的事件有:单击、双击、长按、还有触摸事件 。 可以给文本、按钮等添加不同的事件。...比如添加了单击事件之后,当我们再次点击文本、按钮,就可以运行对应的代码了。 常见的事件有: [在这里插入图片描述]2. 单击事件(常用) 单击事件:又叫做点击事件。...this.findComponentById(ResourceTable.Id_but1); //this:本类的对象,指:MainAbilitySlice(子界面对象) // 子界面当中...可以省略不写 //findComponentById(ResourceTable.Id_but1); //返回一个组件对象(所以组件的父类对象) //那么我们实际写代码的时候...单击事件小节 单击事件:又叫做点击事件。是开发中使用最多的一种事件,没有之一。 实现步骤: 1.通过id找到组件。 2.给按钮组件设置单击事件

    1.4K20

    jQuery 双击事件(dblclick)时,不触发单击事件(click)

    出处:jQuery 双击事件(dblclick)时,不触发单击事件(click) jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。...即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick...mouseout,click,dblclick; 双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。...也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。...}) 从测试结果来看,如果前后两次点击的时间 300ms 左右的时候,还是很容易出现 click 和 dblclick 事件被“同时”调用的情况,而如果间隔的时间更短或更长,则只会有 click 或

    5.3K30

    ztree实现根节点单击事件,显示节点信息

    这段时间维护公司的项目,去年做的项目里面有ztree树的例子,想起之前还没有开始写博客,一些知识点也无从找起,要新加一个右击节点事件,折腾了半天,其中也包含了一些知识点,稍稍做了一些demo。...图片.png 需求,点击根节点的时候,alert出所点击的事件里面的具体节点信息,在这个过程里,如果点击到了父节点(嘉定监狱),则不显示任何信息 1:setting 配置里面,给callback设置,...单击事件onClick : zTreeOnClick; ?...图片.png 2:写一个函数zTreeOnClick // 单击事件 function zTreeOnClick(event, treeId, treeNode) {...fn.zTree.init($("#zTree"), setting, data.returnData.node); }); } // 单击事件

    7.1K30

    Android之按钮点击事件单击、双击、长按等)

    布局文件中添加按钮点击事件 java文件中添加按钮点击事件 为多个按钮添加点击事件 按钮按下、释放事件 按钮长按事件 按钮长按时过滤掉单击事件 按钮双击事件 按钮双击时过滤掉单击事件 布局文件中添加按钮点击事件...,因为按钮长按时仍然会触发点击事件。如果只需要处理长按事件的话则不需考虑这一点,如果要在同一个按钮单击或长按时处理不同的内容,则需长按时过滤掉单击事件。...; return true; } }); 将此处长按事件的返回值改为true即可过滤掉单击事件。...,因为按钮双击时仍然会先触发单击事件。如果只需要处理双击事件的话则不需考虑这一点,如果要在同一个按钮单击或双击时处理不同的内容,则需双击时过滤掉单击事件。...按钮双击时过滤掉单击事件 双击时过滤单击事件的思路可参考以前Qt中的应用(QML之MouseArea双击时过滤掉单击事件):在按钮点击时开启定时器,判断300ms内有没有第二次点击,有的话表示双击,

    2.2K20

    IOS5开发-UIScrollView添加单击事件的方法

    UIScrollView开发中是一个非常常用的控件,UIScrollView具有水平、垂直滚动和缩放效果。但是尽然没有响应单击事件这个事件。而这个事件日常的交互中是非常需要的。...比如当用于单击或轻触图片的某个位置时,给于一些交互性提示。 下面我将用例子说明一下如何给UIScrollView添加一个单击的响应。...UIScrollView @property(nonatomic,assign) id touchesdelegate; @end 如果要想把单击事件传递出来...这里说一下IOS的事件委托(Event Delegate)相对C#的事件委托还是不一样的,似乎实现起来没有C#方便。这里就不多说了。...但是这里注意一下 [self.nextResponder touchesEnded:touches withEvent:event];这句话的意思是将UIScrollView上的单击事件往下传递,传递到它的父

    1.9K70

    移动端,单击穿透是什么?

    移动端开发中,单击穿透(Clickjacking)是指在某些情况下,用户点击一个元素时,可能会触发位于该元素下方的另一个元素上的点击事件。...为了解决单击穿透问题,可以采取以下一些常见的解决方法: 1:阻止事件冒泡: 在上层元素的点击事件处理函数中使用event.stopPropagation()方法,阻止事件向下传播到下层元素,从而避免下层元素的点击事件被触发...2:使用touchend事件替代click事件移动端,click事件通常会有300毫秒的延迟,而touchend事件没有延迟。通过监听touchend事件可以避免延迟触发导致的单击穿透问题。...4:调整布局和交互设计: 设计移动端界面时,避免元素的重叠或过于接近,减少单击穿透的可能性。可以通过调整布局、增加间距或使用遮罩层等方式来改善交互体验。...需要根据具体情况选择适合的解决方法,以解决或避免单击穿透问题,提升移动端应用的用户体验和功能的稳定性。

    50020

    js动画事件_JavaScript事件

    js之动画事件 首先,动画事件主要包括以下三个animationstart,animationiteration和animationend事件,下面做简单分别介绍。...animationstart 该事件css动画开始播放时触发 animationiteration 该事件css动画重新播放时触发 animationend 该事件css动画结束播放时触发 我们知道...animation主要有6个属性,分别来设置动画呈现出来哦的效果,这个我的另一篇文章中有介绍,我这边简单展示一下。...animation:name duration timing-function delay iteration-count direction; 分别是:动画名称 动画持续事件 动画运行速度曲线 动画开始时的运行时间...this.innerHTML="动画重新运行"; x.style.background="greenyellow"; } function myanimationend() //动画运行结束时触发,同样也是通过事件监听事件

    18.4K10

    Js 事件委托(事件代理)

    一、概述 事件委托,又叫事件代理。事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。 例子:有三个同事预计会在周一收到快递。...JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间...,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能; 每个函数都是一个对象...三、事件委托原理 事件委托利用的是事件冒泡原理,将事件绑定到父级元素上,当点击子元素时,通过事件冒泡将事件传递到父级元素。  四、总结: 那什么样的事件可以用事件委托,什么样的事件不可以用呢?...不适合的就有很多了,举个例子,mousemove,每次都要计算它的位置,非常不好把控,不如说focus,blur之类的,本身就没用冒泡的特性,自然就不能用事件委托了。

    11.4K30
    领券