没有合适的资源?快使用搜索试试~ 我知道了~
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
0 下载量 60 浏览量
2020-10-29
10:48:02
上传
评论
收藏 58KB PDF 举报
温馨提示
试读
2页
先通过一个简单例子测试并发现我说的问题,让你有个直观的印象,再接着看我的解决办法。
资源推荐
资源详情
资源评论
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毫秒后
资源评论
weixin_38582793
- 粉丝: 6
- 资源: 888
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功