javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element

因为在JavaScript中,mousedown、mouseup、click执行顺序是从左到右的,更重要的是一旦mousedown事件激活,正常情况(不在mousedown事件中绑定的方法使用alert类似方法,因为弹出对象框就阻止了事件传递,即后续调用事件丢失)下后面两个事件也肯定会被激活。平时我们在一个标签上只绑定一个click事件,其实触发click事件也都调用了mousedown、mouseup等事件,只是它们调用周期极短,而且我们又没有编写相关函数与这两个事件绑定,所以不会觉察到。现在假设你要在一个标签上同时注册这几个事件,并具绑定指定的处理函数,在实际开发中,你将会遇到我下面提及的问题。
先通过一个简单例子测试并发现我说的问题,让你有个直观的印象,再接着看我的解决办法。


代码如下:

<div id="div1" onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" onclick="clickFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div>
<input style="margin-top:10px" type="button" onclick="document.getElementById('div1').innerHTML='';" value="清除信息" />
<script type="text/javascript">
function mouseDownFun()
{
document.getElementById('div1').innerHTML += 'mouseDown<br/>';
}
function mouseUpFun()
{
document.getElementById('div1').innerHTML += 'mouseUp<br/>';
}
function clickFun()
{
document.getElementById('div1').innerHTML += 'click<br/>';
}
</script>

现在假设有这样一个需求:在一张图片上按下mousedown开始拖动这张图片,而在这张图片上发生mouseup鼠标释放就显示这张图片的相关信息。正常情况下要想mouseup绑定的函数执行,那么mousedown绑定的函数也执行了,而且还是先执行的,也就是说在你查看图片信息的时候,图片也在拖动中。其实你正真希望的可能是每次执行其中一个方法就好了,比如当你按下鼠标并很快就释放掉时,其实你是想看图片信息,而不是想拖动图片;相反,如果你按下鼠标并停顿了一下,表明你是想准备拖动图片,这时候查看信息方法不要执行。这怎么做到的呢,根据上面的分析,我发现可以用setTimeout函数来加以处理实现这样的需求(当然,如果你有发现更好的解决办法,一定要记得与我分享,哈)。下面给出完整例子,很简单,也加了注释,不另外解释了:


代码如下:

<div id="div1" onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" style="background:#CCC; border:3px solid #999; width:200px; height:200px; padding:10px"></div>
<input style="margin-top:10px" type="button" onclick="document.getElementById('div1').innerHTML='';" value="清除信息" />
<script type="text/javascript">
var doMouseDownTimmer = null;
var isMouseDownDoing = false;
function mouseDownFun()
{
//因为mouseDownFun每次都会调用的,在这里重新初始化这个变量
isMouseDownDoing = false;
//延迟200毫秒才调用onmousedown真正的处理代码,如果在200毫秒内就释放鼠标,把 doMouseDownTimmer清除,那么onmousedown即使调用了,其实是没有调用到doMouseDown函数作为 onmousedown真正要处理的代码
doMouseDownTimmer = setTimeout(doMouseDown,200);
}
function doMouseDown()
{
//如果200毫秒后调用了这个方法,把isMouseDownDoing设置成true,表明发生了mouseDown实际处理,此后mouseUp就不要处理了
isMouseDownDoing = true;
document.getElementById('div1').innerHTML += 'mouseDown<br/>';
}
function mouseUpFun()
{
if (!isMouseDownDoing)
{
clearTimeout(doMouseDownTimmer); //能进到这里来,不管三七二十一先把doMouseDownTimmer清除,不然200毫秒后doMouseDown方法还是会被调用的
document.getElementById('div1').innerHTML += 'mouseUp<br/>';
}
}
</script>

相关话题:因为平时经常用的click事件都跑在mousedown、mouseup之后,我们可以用mouseup代替click(上面的例子就是这样用的),此时Element上就不要再注册click事件。当然,可以的话,还可以直接拿mousedown代替click,事件响应将更快,其中在Google的一些产品中有看到这样的写法,比如Gmail。

(0)

相关推荐

  • javascript简单拖拽实现代码(鼠标事件 mousedown mousemove mouseup)

    mousedown 的时候创建拖动对象,mouseup的时候释放对象,原理弄清楚了其实很简单. 简单拖拽实现代码: 简单拖拽实现 *{margin:0;padding:0;} #box{ margin:20px auto; position:relative; width:400px; height:400px; background:#ccc; border:1px solid #333; postion:relative; } #dragBox{ width:50px; height:50p

  • JS中mouseup事件丢失的原因与解决办法

    前言 当实现类似Excel选中区域的功能时,经常出现 mouseup 事件丢失的情况,由于缺少了 mouseup 事件,导致一个完整的操作无法进行. 如果你是想进行拖拽移动操作,也可以参考本文. 原因 目前发现两个原因: 触发了浏览器的 drag 操作,导致mouseup丢失. 由于鼠标离开了操作的区域,触发了mouseleave导致mouseup丢失. 解决办法 第一种情况 通过执行下面的代码阻止系统默认的操作来防止触发 drag 操作: //在事件中 e=e || window.event;

  • javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element

    因为在JavaScript中,mousedown.mouseup.click执行顺序是从左到右的,更重要的是一旦mousedown事件激活,正常情况(不在mousedown事件中绑定的方法使用alert类似方法,因为弹出对象框就阻止了事件传递,即后续调用事件丢失)下后面两个事件也肯定会被激活.平时我们在一个标签上只绑定一个click事件,其实触发click事件也都调用了mousedown.mouseup等事件,只是它们调用周期极短,而且我们又没有编写相关函数与这两个事件绑定,所以不会觉察到.现在

  • js函数中onmousedown和onclick的区别和联系探讨

    这两个事件很常见. 了解这两个事件的区别,但是实际并没有使用到这两个事件的区别去做一些操作. 通常使用onclick的时候也可以使用onmousedown,使用onclick的时候更多一些. 今天碰到了非使用onmousedown不可的时候,故特此记录. 先说一下区别:onclick是在鼠标点击弹起之后触发的事件.onmousedown是在鼠标按下之后触发的事件. 简单的说onclick = onmousedown + onmouseup; 如果在某个地方按下鼠标后移开鼠标在另外一个地方松开鼠标

  • JavaScript中click和onclick本质区别与用法分析

    本文实例讲述了JavaScript中click和onclick本质区别与用法.分享给大家供大家参考,具体如下: 原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击. button 对象代表 HTML 文档中的一个按钮.button元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用. 语法:buttonObject.click() <html> <head> &l

  • JavaScript实现获取用户单击body中所有A标签内容的方法

    本文实例讲述了JavaScript实现获取用户单击body中所有A标签内容的方法.分享给大家供大家参考,具体如下: var tbody = document.body; tbody.onclick = function (e) { getUrl(e); } function getUrl(e) { e = e || event; var target = e.target || e.srcElement, href; alert(target.tagName); //获取到A标签中的onclic

  • 使用JavaScript在html文档内添加新的元素节点

    目录 一.基本语法与解释 1.在某元素附近创建一个新的元素节点 2.删除标签 3.修改标签 4.使用选择器选出某一类标签 二.实际应用 1.完整代码 2.运行效果 三.注意事项 前言: 动态的改变原有html文档结构 一.基本语法与解释 1.在某元素附近创建一个新的元素节点  // 将节点插入指定标签之后  // 创建一个p标签对象  var para = document.createElement("p");  // 创建文本对象  var node = document.crea

  • javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

    这里给出一段测试代码: <script type="text/javascript"> document.onkeydown = function(){ document.getElementById("test").innerHTML += "keydown<br/>"; } document.onkeyup = function(){ document.getElementById("test").

  • IE8的JavaScript点击事件(onclick)不兼容的解决方法

    博客园闪存分页是用JavaScript生成的,今天发现在IE8下点击页码不能翻页,翻页操作是在当前页码的onclick事件中进行的. 开始代码是这么写的: 复制代码 代码如下: var a = document.createElement("a");a.setAttribute("onclick", this.ClickFunctionName + "(" + pageIndex + ");Pager.SetCurrent("

  • javascript判断两个IP地址是否在同一个网段的实现思路

    1)基本思路: 要判断两个IP地址是否在同一个网段,将它们的IP地址分别与子网掩码做与运算,得到的结果为网络号,如果网络号相同,就在同一子网,否则,不在同一子网. 2)具体实现: 复制代码 代码如下: /** * [isEqualIPAddress 判断两个IP地址是否在同一个网段] * @param {[String]} addr1 [地址一] * @param {[String]} addr2 [地址二] * @param {[String]} mask [子网掩码] * @return {

  • JavaScript 事件冒泡应用实例分析

    然而,在今天一些大型的WEB交互项目中,比如大型的WebGame项目,JavaScript事件冒泡影响是值得重视的.本文通过一个简单的例子来讲解JavaScript事件冒泡及使用注意事项. 如果你对JavaScript事件冒泡还没有什么印象,不妨先看看我之前写的一篇博客<JavaScript事件冒泡简介及应用>.本文讲究实用,不在对JavaScript事件冒泡基础知识进行过多的阐述. 在文章开始之前,现在先看看下面这样一个需求:下面HTML假设描述的是一个WebGame项目包裹栏(玩过网游的人

  • js 关键词高亮(根据ID/tag高亮关键字)案例介绍

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

随机推荐