JQuery解决鼠标单双击冲突问题

转自链接:https://www.shuzhiduo.com/A/xl560MKrzr/

在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click)。

html代码:

<button>点击</button>

JQ代码:

<script>
        $(function () {
            // 编写相关jQuery代码
            // 单双击的时间间隔是300ms
            // 先做两次单击 一次双击 中间间隔 小于300ms
            var timer = null;

            // 获取事件源,绑定事件
            $(‘button‘).click(function () {
                // 清除定时器
                clearTimeout(timer);
                // 设置定时器 300ms 一次性定时器
                timer = setTimeout(function () {
                    console.log(‘单机‘);
                },300)
            });

            $(‘button‘).dblclick(function () {
                // 清除定时器
                clearTimeout(timer);
                console.log(‘双击‘);
            })
        })
    </script>

原文地址:https://www.cnblogs.com/myitnews/p/12079590.html

时间: 2024-11-06 09:52:36

JQuery解决鼠标单双击冲突问题的相关文章

JQuery如何实现双击事件时不触发单击事件,解决鼠标单双击冲突问题

在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click). 但有时候我们希望在执行双击事件的时候不去出发单击事件,那究竟该如何实现呢? 少bb 上代码 : <!DOCTYPE html> <html lang="en"> <head> <meta charset

js区分鼠标单双击 阻止事件冒泡

function clickOrDblClick(obj) { count++; if (obj != undefined) { var rowStr = $.trim($(obj).find("td:eq(1)").text().replace(/※/g, '')); currentRowpm = rowStr; } timer = window.setTimeout(function(obj) { var currentTr = $("#tbMainDeputy"

jquery——解决鼠标移入移出导致盒子不停移动的bug

使用mouseover().mouseout()时会出现这样一种情况,鼠标快速多次移入移出后这个盒子会在鼠标不动后继续运动 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src

解决鼠标左键单击冲突的问题(防止冒泡)

本人在一个页面实现了两种右键菜单,当鼠标左键单击空白处时,右键菜单并不隐藏.于是,Google之,最后找到一种方法,将鼠标左键单击事件改为: $(document).click( function () { } 改为 $(document).on('click touchstart', function () { } 问题解决.解决鼠标左键单击冲突的问题(防止冒泡),布布扣,bubuko.com

jQuery中noConflict()机制的冲突解决方法

许多的JS框架类库都选择使用$符号作为函数或变量名,而且在实际的项目开发中,使用模板语言的话有可能"$"符号即为该模板语言的关键字.例如Veclocity模板语言,$是关键字.与jQuery一起使用可能会存在冲突(页面中直接写jq代码,引入的js文件不存在该问题). jQuery是使用$符号作为函数或变量名最为典型的一个.在jQuery中,$符号只是window.jQuery对象的一个引用,因此即使$被删除,jQuery依然能保证整个类库的完整性. jQuery的设计充分考虑了多框架之

jquery验证表单 提交表单

问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script> <script type="text/javascript"> function check(){ var npassw

解决Eclipse SVN文件冲突详解

在使用Eclipse SVN插件进行团队开发的过程,假设开发人员A和B都获取了同一个文件的最新版本(假如版本号为8),并都对其进行了改动,成员A已经提交了自己所作的改动(版本号变为9),如果此时成员B想要提交自己的改动,就极有可能与成员B已经提交的改动产生冲突. 如下图所示,在Eclipse SVN同步视图中的Test.java就是一个产生了版本冲突的文件,那么我们该如何解决SVN的文件冲突呢? 1.解决简单的文件版本冲突 对于产生版本冲突的文件,如果两个人改动的不是同一处位置,例如成员A只改动

ubuntu下解决鼠标滚轮不能使用的问题

如果你是在VM下安装 Ubuntu,那么必须安装VMware-tools,才能获得更好的体验,包括屏幕分辨率.声音.和windows共享剪贴板等等. 点击VMware菜单的-VM-Install VMware Tools 这时,在Ubuntu下会自动加载Linux版的VMware Tools的安装光盘镜像.你会看到虚拟机的桌面上出现了一个名为VMware Tools的光盘图标,并且被自动打开.其中包括VMwareTools-xxx-i386.rpm和VMwareTools- xxx.tar.gz

JS同时绑定单双击事件

这两天工作上遇到这种情况,需要在tree组件上的每个节点绑定单双击事件,怎么实现呢?借助js的定时器来实现这个功能吧,思路是这样的:给定时器设置一个时间,如果在该时间段内用户点击一次则触发单机事件,大于1的话就执行双击事件.废话不多说,这里我们用一个示例来说明: 首先要引入jQuery,这里用jquery来为测试元素绑定事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <