11.mouseDown事件，mouseUp,和mouseClick执行顺序
马 克-to-win：下例仔细剖析了mouseDown和mouseClick的关系。当两个对象重叠在一起，（比如这里document和span），一 定是先执行所有元素的mouseDown事件，之后所有元素的mouseUp,之后执行所有元素的mouseClick。（有一点切记注意，本例子测试过 程中不能用alert，如用alert，down事件后不会再执行click事件了。事件就被alert打断了。）
例 11.1
<html>
<head>
<title>根据实验，本例仔细剖析了mouseDown和mouseClick的关系。当两个对象重叠在一起，（比如这里 document和span），一定是先执行所有元素的mouseDown事件，之后所有元素的mouseUp,之后执行所有元素的 mouseClick</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<SCRIPT language=JavaScript>
function linkClickHandler(event) {
// alert(event.srcElement+"is event.srcElement");
// alert(event.target+"is event.target");
var t =event.srcElement||event.target;
// alert(t.id+" qq1 ");
sss2.innerHTML += t.id+" click ";
}
function linkDownHandler(event) {
// alert(event.srcElement+"ddddddddis event.srcElement");
// alert(event.target+"is event.target");
var t =event.srcElement||event.target;
// alert(t.id+" qq1 ");
sss2.innerHTML += t.id+" down ";
}
function documClickHandler(event) {
if (document.all) {
}else{
// alert("event.currentTarget is "+event.currentTarget+" event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段");
/*Event.CAPTURING_PHASE 1
Event.AT_TARGET 2
Event.BUBBLING_PHASE*/
sss2.innerHTML += " event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段"+" document click ";
}
}
function documDownHandler(event) {
if (document.all) {
}else{
// alert("down dddddd event.currentTarget is "+event.currentTarget+" event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段");
sss2.innerHTML += " event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段"+" document down ";
}
}
document.onclick = documClickHandler;
document.onmousedown = documDownHandler;
</script>
</head>
<body>
<span id="sss2" onClick="linkClickHandler(event);" onMouseDown="linkDownHandler(event);">
点我</span>
</body>
</html>
javascript当中mouseDown事件，mouseUp,和mouseClick执行顺序
猜你喜欢
转载自blog.csdn.net/mark_to_win/article/details/88642327
今日推荐
周排行