mousedown和click冲突事件
鼠标事件,一般用button来区分鼠标的按键(DOM3标准规定: click事件只能监听左键, 只能通过mousedown和mouseup来判断鼠标键):
1.鼠标左键 button = 0
2.鼠标右键 button = 2
3.鼠标滑轮 button = 1
div.onmousedown = function (e) {
var event = e || window.event;
if(event.button == 2){
console.log('right');
}else if(event.button == 0){
console.log('left');
}
}
解决mousedown和click的之间的冲突 (利用事件发生时间来判断 点击事件时间短)
var key = false;//设置了一个标志 false为点击事件 ture为鼠标移动事件
var firstTime = 0;
var lastTime = 0;
div.onclick = function() {
if(key){
console.log('click');
key = false;
}
}
div.onmousedown = function() {
firstTime = new Date().getTime();
console.log('mouseDown');
}
div.onmouseup = function() {
console.log('mouseUp');
//鼠标抬起后 记录时间 超过200ms就是移动事件
lastTime = new Date().getTime();
if( (lastTime - firstTime) <){
key = true;
}
}
mousedown和click冲突事件的更多相关文章
- 快速解决js开发下拉框中blur与click冲突
在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...
- 下拉框选择blur与click冲突问题
缘由:今天在做下拉框选择时,遇到click和blur冲突问题:具体现象如下 1.intput框获取焦点(focus事件)时显示隐藏的下拉框,失去焦点(blur事件)则隐藏下拉框 2.点击选择(clic ...
- 点击div和某些控件之外的地方隐藏div,点击div不隐藏。对象 click和document click冲突有关问题
帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题! ...
- jquery click嵌套 事件重复注册 多次执行的问题
jquery click嵌套 事件重复注册 多次执行的问题 上面只是参考,我自己的解决方法是先使用unbind("click")解除事件然后再绑定新事件: $("#tes ...
- input元素的blur事件与定位在其上面的元素的点击(click)事件冲突的解决方法
在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...
- 解决移动端touch事件与click冲突的问题
最简单的办法,就只绑定一个事件不就行了: 第二种,我觉得和第一种也没啥区别.. const Button = document.getElementById("targetButton&qu ...
- mousedown\mouseup\click事件关系
背景分析: 如果用户在一个元素上点击,那么最少三个事件会被触发,事件发生顺序: 1.mousedown,当用户在这个元素上按下鼠标键的时候 2.mouseup,当用户在这个元素上松开鼠标键的时候 3. ...
- 关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
- 原生andriod浏览器回退后dom(click)事件全体失效问题探究
问题描述 今天同事遇到一个神一样的BUG: 在原生浏览器下,为dom元素绑定一个click事件,其中有个a标签外链,点击a后进入其他页面,点击浏览器后退后,页面点击事件全体失效! 我于是用ios测了下 ...
随机推荐
- linux 查看nginx如何启动
执行命令: ps -A | grep nginx如果返回结果的话,说明有nginx在运行,服务已经启动
- Linux/Ubuntu安装搜狗输入法
零.你首先需要安装fcitx小企鹅输入法,相信绝大部分用linux的中国人都用这个输入法,安装fcitx后同时还能解决Sublime Text的中文输入问题. 安装fcitx输入法前首先要安装fcit ...
- [转]Fiddler模拟post四种请求数据
1 前言 仅作为记录使用. 2 内容 post请求主体详解: 对于get请求来说没有请求主体entity-body.对于post请求而言,不会对发送请求的数据格式进行限制,理论上你可以发任意数据,但是 ...
- 38)django-组合搜索
一:组合搜索 组合搜索可以用来实现快速查询.效果图举例.瓜子网站选车 注意:URL中的地址0-0什么的是传递的参数的值. 二:实现组合搜索 组合实现条件 1)有外键或者多对多多关系 2)有choice ...
- swoole深入学习 2. tcp Server和tcp Client
这节来学习Swoole最基础的Server和Client.会通过创建一个tcp Server来讲解. server <?php class Server { private $serv; pub ...
- grep匹配某个次出现的次数
cat file | grep -c 'xxx' 统计xxx在file中出现的行数 cat file | grep -o 'xxx' 统计xxx在file中出现的次数
- IOS 静态库 和 动态库
库从本质上市一中可执行的二进制格式,可以被载入内存中执行 iOS 中的静态库有 .a 和 .framework 两种形式; 动态库有 .dylib 和 .framework 两种, 后来 ...
- java怎样将一组对象传入Oracle存储过程
注:本文来源 < java怎样将一组对象传入Oracle存储过程 > java怎样将一组对象传入Oracle存储过程 java怎样将一组对象传入Oracle存储过程.须要注意的是jar ...
- Confluence 6 自定义站点和空间布局
你可以通过编辑布局文件来修改 Confluence 的外观和感觉(也可以被称为装饰).编辑这些文件将会允许你对整个 Confluence 站点的外观和感觉进行修改或者仅仅是一个独立的空间. 当你对一个 ...
- Android 基础 十一 Android的消息机制
Handler是Android消息机制的上层接口,这使得在开发应用过程中我们只需要和Handler交互即可.Handler的使用过程很简单,通过它可以轻松地将一个任务切换到Handler所在的线程中去 ...