HTML onmouseup 事件属性 HTML 教程 JTCMS-掘塔数据
HTML onmouseup 事件属性实例当在段落上松开鼠标按钮时执行 JavaScript：&p onmouseup=&mouseUp()&&Click the text!&/p&浏览器支持
所有主流浏览器都支持 onmouseup 属性。定义和用法onmouseup 属性在松开鼠标按钮时触发。提示：相对于 onmouseup 事件的事件次序（限于鼠标左/中键）：onmousedownonmouseuponclickonmouseup 事件的事件次序（限于鼠标右键）：onmousedownonmouseuponcontextmenu注释：onmouseup 属性不适用于以下元素：&base&、&bdo&、&br&、&head&、&html&、&iframe&、&meta&、&param&、&script&、&style& 或 &title&。HTML 4.01 与 HTML5 之间的差异无。语法&element onmouseup=&script&&属性值值描述scriptonmouseup 发生时运行的脚本。JS如何将拖拉事件与点击事件分离？ - 推酷
JS如何将拖拉事件与点击事件分离？
如何将拖拉事件跟点击事件分离？
需要做到：拖拉时不触动点击事件
&html xmlns=&http://www.w3.org/1999/xhtml&&
js拖拽组件1
&script type=&text/javascript& src=&Drag.js&&&/script&
&script type=&text/javascript&&
window.onload = function(){
Drag.init(document.getElementById(&handle1&),document.getElementById(&handle1&));//handle和dragBody都是一样的 这是就相当于是拖动handle本身
&style type=&text/css&&
&div id=&handle1& style=&border:1width:150height:30position:left:100top:100& onclick=&alert(2);&&
拖拉我、点击我
var Drag={
&obj&:null,
&init&:function(handle, dragBody, e){
if (e == null) {
handle.onmousedown=Drag.
handle.root = dragB
if(isNaN(parseInt(handle.root.style.left)))handle.root.style.left=&0px&;
if(isNaN(parseInt(handle.root.style.top)))handle.root.style.top=&0px&;//确保后来能够取得top值
handle.root.onDragStart=new Function();
handle.root.onDragEnd=new Function();
handle.root.onDrag=new Function();
if (e !=null) {
var handle=Drag.obj=
e=Drag.fixe(e);
var top=parseInt(handle.root.style.top);
var left=parseInt(handle.root.style.left);
handle.root.onDragStart(left,top,e.pageX,e.pageY);
handle.lastMouseX=e.pageX;
handle.lastMouseY=e.pageY;
document.onmousemove=Drag.
document.onmouseup=Drag.
&start&:function(e){
var handle=Drag.obj=
e=Drag.fixEvent(e);
var top=parseInt(handle.root.style.top);
var left=parseInt(handle.root.style.left);
//alert(left)
//一般情况下 left top 在初始的时候都为0
handle.root.onDragStart(left,top,e.pageX,e.pageY);
handle.lastMouseX=e.pageX;
handle.lastMouseY=e.pageY;
document.onmousemove=Drag.
document.onmouseup=Drag.
&drag&:function(e){//这里的this为document 所以拖动对象只能保存在Drag.obj里
e=Drag.fixEvent(e);
var handle=Drag.
var mouseY=e.pageY;
var mouseX=e.pageX;
var top=parseInt(handle.root.style.top);
var left=parseInt(handle.root.style.left);//这里的top和left是handle.root距离浏览器边框的上边距和左边距
var currentLeft,currentT
currentLeft=left+mouseX-handle.lastMouseX;
currentTop=top+(mouseY-handle.lastMouseY);
//上一瞬间的上边距加上鼠标在两个瞬间移动的距离 得到现在的上边距
handle.root.style.left=currentLeft +&px&;
handle.root.style.top=currentTop+&px&;
//更新当前的位置
handle.lastMouseX=mouseX;
handle.lastMouseY=mouseY;
//保存这一瞬间的鼠标值 用于下一次计算位移
handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);//调用外面对应的函数
&end&:function(){
document.onmousemove=
document.onmouseup=
Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
&fixEvent&:function(e){//格式化事件参数对象
if(typeof e==&undefined&)e=window.
if(typeof e.layerX==&undefined&)e.layerX=e.offsetX;
if(typeof e.layerY==&undefined&)e.layerY=e.offsetY;
if(typeof e.pageX == &undefined&)e.pageX = e.clientX + document.body.scrollLeft - document.body.clientL
if(typeof e.pageY == &undefined&)e.pageY = e.clientY + document.body.scrollTop - document.body.clientT
问题应该出在onmouseup时也调用了onclick方法。网上找了方法，其中，
/A_ming/archive//2950346.html 不知如何应用进来。
后来想了另一个方法，就是添加一个公共变量，在onmousedown、onmouseup、onclick分别获取鼠标的坐标，并记录在公共变量里，
做了个小例子区分他们执行的顺序，如下：
&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Document&/title&
&div id=&x& style=&border:1px solid #&&xxxxxxxxxxxxxxxxxxxxxxxx&/div&
&script type=&text/javascript&&
= document.getElementById(&x&);
var shubiaoX = 0;
d.onmousedown=function(){
console.log(&mousedown&);
shubiaoX = event.screenX;
console.log(&1:&+shubiaoX);
d.onmouseup=function(){
console.log(&mouseup&);
shubiaoX = event.screenX;
console.log(&2:&+shubiaoX);
d.onclick=function(){
console.log(&click&);
shubiaoX = event.screenX;
console.log(&3:&+shubiaoX);
发现执行的顺序为onmousedown、onmouseup、onclick
原位置点击：
拖动点击：
上面可以发现，拖动点击的mousedown后移动，mouseup与click事件鼠标坐标发生变化，且一样。
故而，可以判断鼠标的坐标来区分是拖动点击还是原地点击~
当然这个是个土的办法，如果有更好的请回复~
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致javascript当onmousedown、onmouseup、onclick同时应用于同一个
因为在Script中，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:200 height:200 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:200 height:200 padding:10px"&&/div& &input style="margin-top:10px" type="button" onclick="document.getElementById('div1').innerHTML='';" value="清除信息" /& &script type="text/javascript"& var doMouseDownTimmer = var isMouseDownDoing = function mouseDownFun() { //因为mouseDownFun每次都会调用的，在这里重新初始化这个变量 isMouseDownDoing = //延迟200毫秒才调用onmousedown真正的处理代码，如果在200毫秒内就释放鼠标，把 doMouseDownTimmer清除，那么onmousedown即使调用了，其实是没有调用到doMouseDown函数作为 onmousedown真正要处理的代码 doMouseDownTimmer = setTimeout(doMouseDown,200); } function doMouseDown()
{ //如果200毫秒后调用了这个方法，把isMouseDownDoing设置成true，表明发生了mouseDown实际处理，此后mouseUp就不要处理了 isMouseDownDoing = 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。
------分隔线----------------------------
------分隔线----------------------------
你可能对下面内容感兴趣:&title&test&/title&
&link rel="stylesheet" type="text/css" href="./css/test.css" /&
function testdown()
//鼠标按下时
//alert("aaa");
document.getElementById('txtptz').value=1;
function testup()
//鼠标松开时
//alert("aaa");
document.getElementById('txtptz').value=2;
&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/&';
&p&test&/p&
&input type="test" id="txtptz" onmousedown="testdown();" onmouseup="testup();"&
&input id="testptz"
type="button" name="reset"
value="保存"
onmousedown="testdown();" onmouseup="testup();" &
&div id="div1" onmousedown="mouseDownFun();" onmouseup="mouseUpFun();" onclick="clickFun();" style="background:#CCC; border:3px solid #999; width:200 height:200 padding:10px"&&/div&
&input style="margin-top:10px" type="button" onclick="document.getElementById('div1').innerHTML='';" value="清除信息" /&
阅读(...) 评论()不跪求，请教onmousedown,onmouseup,onclick的顺序疑虑_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：139,454贴子：
不跪求，请教onmousedown,onmouseup,onclick的顺序疑虑收藏
一楼负责召唤
javascript 在线咨询领取笔试题目和试听资料!海同科技是您贴心的IT培训机构!上海海同科技:包食宿,零压力,模拟面试,轻松入职百强企业!
二楼的文章有很多错误。求解释，求纠正。
在计算、保存、申请等后台长时间交互时，需要个遮罩层来提示用户【操作正在进行】。
1、在页面上添加遮罩层html代码，默认隐藏。
&div id="Tips"
style="left:500top:300z-index:99999;text-align:border:solid
1px #000;font-size:12
background:#b9position:_position:width:200padding:5"&
src="&%=basePath%&/policy/universal/quickapp/images/loading.gif"
width="16"' height="16" align="absmiddle" /&
数据加载中，请稍等....&/div&
2、增加触发遮罩层显示、隐藏的控制代码。
如&input value="计算" onclick="calcPr()"&
&input value="计算" onclick="calcPr()" onmousedown="showTips()" onmouseup="hideTips()"&
其中，showTips和hideTips的代码示例如下
function showTips(msg){
msg = msg || "操作正在进行，请稍等....";
var tips = document.getElementById('Tips');
tips.innerHTML =
utils.centerOffset($(tips));
tips.style.display = '';
function hideTips(){
var tips = document.getElementById('Tips');
tips.style.display = 'none';
常规思路，在后台交互方法体内解决遮罩层的显示及隐藏。
function calcPr(){
显示遮罩层；
隐藏遮罩层();
但这种做法是行不通的。
原因：在古老浏览器里，对dom的操作是很耗时的。IE的开发人员所做的一个【优化】是，在一个连续的js进程里，将对dom的操作搁置，等到js进程结束，才将对dom的所有修改一次性生效。
我用下面一段伪代码来举例。
function test(){
宽度设为100px；
高度设为200px；
背景设为红色；
宽度设为300px；
背景设为绿色；
也许你的期望是，先将控件的宽度设为100px，然后将高度设为200px，背景设为红色，最后将宽度又更改为300px，背景设为绿色。
但是IE实际做的只有，将高度设为200px，将宽度设为300px，将背景设为绿色。
现在回过头来看我们的常规遮罩层思路。在IE的自作聪明的【优化】下，我们先将遮罩层显示，再将遮罩层隐藏的行为，相当于什么都没有做。庆幸的是，firefox等浏览器已不再做这种自作聪明的优化了。
那么在IE下，就一点办法都没有吗？
刚才提到过【在一个连续的js进程里】，是的，我们可以利用某些方式对js执行造成阻塞。
function calcPremium(){
显示遮罩层；
ajax交互；
隐藏遮罩层();
但很显然，用户并不想操作过程中弹出莫名其妙的警告框。
在这里，我们采用了另外一种方式。
onclick="calcPr()" onmousedown="showTips()" onmouseup="hideTips()"
在mousedown时显示遮罩层，click时执行我们的业务代码，mouseup时隐藏遮罩层。
看到这里，也许你想问，为什么mouseup的代码会等到click的代码结束后才执行？
一句话，【javascript是单线程的！】
我想举一个不太恰当但是非常简单的例子（见文末备注）来说明，javascript的执行顺序像是一个队列。
如上的mousedown，click, mouseup事件按照被触发顺序依次被添加到执行队列里。
即使mouseup在我们松开鼠标的一瞬间被触发了，由于单线程的原因，依然不得不等到click事件执行完毕，mouseup才会被执行。 【备注】
另外，我要承认，我是个骗子。
之所以说“不太恰当”，是因为实际的执行顺序是mousedown, mouseup, click。
可自行用下面的代码测试。 javascript是门奇葩得令人凌乱的语言，我试图用个比较正确且比较简单的例子来讲解，然后，然后我自己凌乱了。 &div id="abc" onclick="a()" onmouseup="up()" onmousedown="down()"&测试&/div&
function a(){
document.getElementById("abc").innerHTML += "&br&click";
function up(){
document.getElementById("abc").innerHTML += "&br&up";
function down(){
document.getElementById("abc").innerHTML += "&br&down";
没看第四楼. HTML 规格是没有严格规范事件的次序, 不过我用过的语言全都是 up 先於 click, 完成了压下和释放之后才会确认是按. 所以次序为 down & up & click.
在计算、保存、申请等后台长时间交互时，需要个遮罩层来提示用户【操作正在进行】。
1、在页面上添加遮罩层html代码，默认隐藏。
&div id="Tips"
style="left:500top:300z-index:99999;text-align:border:solid
1px #000;font-size:12
background:#b9position:_position:width:200padding:5"&
src="&%=basePath%&/policy/universal/quickapp/images/loading.gif"
width="16"' height="16" align="absmiddle" /&
数据加载中，请稍等....&/div&
2、增加触发遮罩层显示、隐藏的控制代码。
如&input value="计算" onclick="calcPre()"&
&input value="计算" onclick="calcPre()" onmousedown="showTips()" onmouseup="hideTips()"&
其中，showTips和hideTips的代码示例如下
function showTips(msg){
msg = msg || "操作正在进行，请稍等....";
var tips = document.getElementById('Tips');
tips.innerHTML =
utils.centerOffset($(tips));
tips.style.display = '';
function hideTips(){
var tips = document.getElementById('Tips');
tips.style.display = 'none';
常规思路，在计算方法体内（或ajax交互方法体内）解决遮罩层的显示及隐藏。
function calcPremium(){
显示遮罩层；
隐藏遮罩层();
但这种做法是行不通的。
原因：在古老浏览器里，对dom的操作是很耗时的。IE的开发人员所做的一个【优化】是，在一个连续的js进程里，将对dom的操作搁置，等到js进程结束，才将对dom的所有修改一次性生效。
我用下面一段伪代码来举例。
function test(){
//在这设断点
宽度设为100px；
高度设为200px；
背景设为红色；
宽度设为300px；
背景设为绿色；
也许你的期望是，随着每一句代码的执行，依次将控件的宽度设为100px，高度设为200px，背景设为红色，最后将宽度又更改为300px，背景设为绿色。
但是IE实际做的只有，在test()执行完后，一次性将高度设为200px，将宽度设为300px，将背景设为绿色。
现在回过头来看我们的常规遮罩层思路。在IE的自作聪明的【优化】下，我们先将遮罩层显示，再将遮罩层隐藏的行为，相当于什么都没有做。庆幸的是，firefox等浏览器已不再做这种自作聪明的优化了。
那么在IE下，就一点办法都没有吗？
刚才提到过【在一个连续的js进程里】，是的，我们可以利用某些方式对js执行造成阻塞。
function calcPre(){
显示遮罩层；
隐藏遮罩层();
但很显然，用户并不想操作过程中弹出莫名其妙的警告框。
在这里，我们采用了另外一种方式。
onclick="calcPr()" onmousedown="showTips()" onmouseup="hideTips()"
在mousedown时显示遮罩层，click时执行我们的业务代码，mouseup时隐藏遮罩层。 原理和上面一致。我们可以将这三个方法分成两部分： 一、mousedown显示遮罩层 二、mouseup时隐藏遮罩层，click时执行我们的业务代码
为什么要这样划分呢？
再来看下面这个小例子。我们可以发现，鼠标按下后网页div层abc上马上出现了down，先别松开鼠标。
过几秒钟后，松开鼠标，这时div层abc里才出现了up和click。
这个例子就可以很清楚地说明，mousedown和【mouseup、click】是分别处理的。 假如我们按住鼠标1小时不放，不可能中断线程1小时吧！（PS：javascript是单线程的！）
&div id="abc" onclick="a()" onmouseup="up()" onmousedown="down()"&测试&/div&
function a(){
document.getElementById("abc").innerHTML += "&br&click";
function up(){
document.getElementById("abc").innerHTML += "&br&up";
function down(){
document.getElementById("abc").innerHTML += "&br&down";
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或}