在JQuery中,我们可以利用mousedown、mouseup来跟踪页面的鼠标按下与释放事件。

如何获取鼠标的位置信息呢?事件event的pageX和pageY属性可以让我们获得鼠标在页面中的具体位置信息,相当于数学坐标系中的xy坐标那样。

于是我们可以先用一个全局变量来记录鼠标按下的位置信息,再在鼠标释放的函数里判断按下的位置与释放的位置是否一致,再根据结果做操作。

示例代码如下:

    var x,y;
$(document).mousedown(function(event){ //获取鼠标按下的位置
x = event.pageX;
y = event.pageY;
});
$(document).mouseup(function(event){//鼠标释放
var newX = event.pageX;
var newY = event.pageY;
if(x==newX && y==newY){
//位置相同的操作
}
else{
//位置不同的操作
}
})

JQuery使用mousedown和mouseup简单判断鼠标按下与释放位置是否相同的更多相关文章

  1. 原生态js,鼠标按下后,经过了那些单元格

    本来是要判断那些单元格被选中,结果发现行不通,只能判断鼠标按下后,经过了那些单元格 之所以发出来,是觉得案例还有很多有意思的地方 onmouseover  的持续触发,导致了很多重复元素 由于将事件绑 ...

  2. C#WinForm无边框窗体移动方法、模仿鼠标单击标题栏移动窗体位置

    C#WinForm无边框窗体移动方法.模仿鼠标单击标题栏移动窗体位置 这里介绍俩种办法 方法一:直接通过修改窗体位置从而达到移动窗体的效果 方法二:直接伪装发送单击任务栏消息,让应用程序误以为单击任务 ...

  3. C#WinForm无边框窗体移动----模仿鼠标单击标题栏移动窗体位置

    C#WinForm无边框窗体移动方法.模仿鼠标单击标题栏移动窗体位置 这里介绍俩种办法 方法一:直接通过修改窗体位置从而达到移动窗体的效果 方法二:直接伪装发送单击任务栏消息,让应用程序误以为单击任务 ...

  4. jQuery插件,判断鼠标的移入移出方向

    今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <htm ...

  5. jquery事件 【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  6. JavaScript区分click事件和mousedown(mouseup、mousemove)方法

    在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...

  7. click事件和mousedown、mouseup事件

    点击select标签元素的时候,会弹出下拉.然而当option中没有元素时,就不希望弹出下拉(比如在某些浏览器中,点击select会默认出一个罩层效果,而此时没有数据选择的话,弹出比较不友好). 首先 ...

  8. Javascript 简单实现鼠标拖动DIV

    http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...

  9. js判断鼠标向上滚动并浮动导航

    <div id="Jnav"> <ul class="nav"> <li><a href="#"& ...

随机推荐

  1. Opencv2.4.13 与Visual Studio2013 环境搭建配置

        opencv这个工具来进行图像处理.大致是使用C++语言编写程序实现识别算法的实现,所以首先就要进行opencv与VS环境的配置. Shaine属于那种半路出家之人都算不上的那种,本科期间三四 ...

  2. layer插件

    最近在做公司的官网,其中有用到layer这款插件,以前没有接触过,不过学下来觉得好用好学.下面分享一下我的学习心得. layer是web弹出层组件.在官网下载好layer后,把他部署到你的项目文件中( ...

  3. cuda编程学习6——点积dot

    __shared__ float cache[threadPerBlock];//声明共享内存缓冲区,__shared__ __syncthreads();//对线程块中的线程进行同步,只有都完成前面 ...

  4. java学习(一)静态代码块 构造代码块 构造方法的执行顺序及注意问题

    今天我总结了一下java中静态代码块 构造代码块 构造方法的执行顺序及其注意问题 首先要知道静态代码块是随着类的加载而加载,而构造代码块和构造方法都是随着对象的创建而加载 当时做了这么一个小案例(想必 ...

  5. Tcl与Design Compiler (二)——DC综合与Tcl语法结构概述

    1.逻辑综合的概述 synthesis = translation + logic optimization + gate mapping . DC工作流程主要分为这三步 Translation : ...

  6. CoreCLR源码探索(四) GC内存收集器的内部实现 分析篇

    在这篇中我将讲述GC Collector内部的实现, 这是CoreCLR中除了JIT以外最复杂部分,下面一些概念目前尚未有公开的文档和书籍讲到. 为了分析这部分我花了一个多月的时间,期间也多次向Cor ...

  7. SQL条件循环语句以及异常知识整理

    create or replace procedure pr_test1 is begin > then dbms_output.put_line('条件成立'); elsif > the ...

  8. Python之路-计算机基础

    一·计算机的组成 一套完整的计算机系统分为:计算机硬件,操作系统,软件.   硬件系统:运算器,控制器和存储器 ,输入设备,输出设备. 1.运算器:负责算数运算和逻辑运算,与控制器一起组成CPU. 2 ...

  9. linux之shell编程基本语法

    Shell是用户与内核进行交互操作的一种接口,目前最流行的Shell称为bash Shell.Shell也是一门编程语言<解释型的编程语言>,即shell脚本<就是在用linux的s ...

  10. 插入排序的优化非希尔【不靠谱地讲可以优化到O(nlogn)】 USACO 丑数

    首先我们先介绍一下普通的插排,就是我们现在一般写的那种,效率是O(n^2)的. 普通的插排基于的思想就是找位置,然后插入进去,其他在它后面的元素全部后移,下面是普通插排的代码: #include< ...