鼠标事件,一般用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冲突事件的更多相关文章

  1. 快速解决js开发下拉框中blur与click冲突

    在开发中我们会经常遇到blur和click冲突的情况.下面叙述了开发中常遇到的"下拉框"的问题,并提供了两种解决方案. 一.blur和click事件简述 blur事件:当元素失去焦 ...

  2. 下拉框选择blur与click冲突问题

    缘由:今天在做下拉框选择时,遇到click和blur冲突问题:具体现象如下 1.intput框获取焦点(focus事件)时显示隐藏的下拉框,失去焦点(blur事件)则隐藏下拉框 2.点击选择(clic ...

  3. 点击div和某些控件之外的地方隐藏div,点击div不隐藏。对象 click和document click冲突有关问题

    帮朋友解决这个问题,我发现用以往想想像的方式来实现,貌似不太可行,所以从网上找了一些解决办法,进行优化,这篇比较详细,所以拿来备忘,另一方面也希望可以帮助需要的同学! 问题背景:jQuery事件问题! ...

  4. jquery click嵌套 事件重复注册 多次执行的问题

    jquery click嵌套 事件重复注册 多次执行的问题 上面只是参考,我自己的解决方法是先使用unbind("click")解除事件然后再绑定新事件: $("#tes ...

  5. input元素的blur事件与定位在其上面的元素的点击(click)事件冲突的解决方法

    在登录和注册框中,在input上定位一个清空内容的按钮. 但是给按钮的单击事件不生效. 解决的办法: 在blur的回调函数中加一个定时器,延迟blur回调函数的执行时间,这样的话虽然在点击div的时候 ...

  6. 解决移动端touch事件与click冲突的问题

    最简单的办法,就只绑定一个事件不就行了: 第二种,我觉得和第一种也没啥区别.. const Button = document.getElementById("targetButton&qu ...

  7. mousedown\mouseup\click事件关系

    背景分析: 如果用户在一个元素上点击,那么最少三个事件会被触发,事件发生顺序: 1.mousedown,当用户在这个元素上按下鼠标键的时候 2.mouseup,当用户在这个元素上松开鼠标键的时候 3. ...

  8. 关于JS 事件冒泡和onclick,click,on()事件触发顺序

    今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...

  9. 原生andriod浏览器回退后dom(click)事件全体失效问题探究

    问题描述 今天同事遇到一个神一样的BUG: 在原生浏览器下,为dom元素绑定一个click事件,其中有个a标签外链,点击a后进入其他页面,点击浏览器后退后,页面点击事件全体失效! 我于是用ios测了下 ...

随机推荐

  1. python多线程threading下载示例

    #coding:utf-8 # windows中测试不通过,下载的图片不完整 # 通过多线程下载图片 import requests import threading class downloader ...

  2. Confluence 6 缓存状态

    Confluence 为系统的内部缓存提供了缓存的状态以便于你对缓存的大小的命中率进行跟踪,在必要的情况下,你可以对缓存进行调整,让缓存能够更好的满足你的使用需求.请查看 Performance Tu ...

  3. Confluence 6 反向跟踪

    当反向跟踪(Trackback )被启用后,在任何你链接到可用启用自动发现功能的外部页面中,Confluence 将会自动发送一个方向跟踪 ping,这个 ping 能通知链接的页面有了内容改变. C ...

  4. Confluence 6 配置手动备份

    如果你希望关闭自动备份,你可以选择手动导出保存站点.请参考 Manually Backing Up the Site 页面中的内容获得更多的信息. 这些文件没有自动备份在同样的路径中,这些文件存储在 ...

  5. Confluence 6 编辑自定义 Decorators

    希望对 Confluence 的 decorator 进行编辑的话,你需要具有良好的 HTML 知识和能够理解  Velocity 模板语言. 希望编辑 decorator 文件: 进入  Confl ...

  6. Python基础之继承与派生

    一.什么是继承: 继承是一种创建新的类的方式,新建的类可以继承一个或过个父类,原始类成为基类或超类,新建的类则称为派生类 或子类. 其中,继承又分为:单继承和多继承. class parent_cla ...

  7. 简单的做一个图片上传预览(web前端)

    转载:点击查看原文 在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: & ...

  8. CentOS6.8安装MySQL5.7.20时报Curses library not found解决

    报错如下: CMakeErroratcmake/readline.cmake:83(MESSAGE): Curseslibrarynotfound.Pleaseinstallappropriatepa ...

  9. Java接口自动化测试之TestNG测试报告ExtentReports的应用(三)

    pom.xml导入包 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  10. json如果不在pom中添加依赖会抛出500异常

    所以必须添加以下依赖: <!--jackson相关依赖--><!-- https://mvnrepository.com/artifact/com.fasterxml.jackson ...