javascript当中mouseDown事件，mouseUp,和mouseClick执行顺序

最新推荐文章于 2024-01-29 15:40:11 发布

mark_to_win

最新推荐文章于 2024-01-29 15:40:11 发布

阅读量4.1k

点赞数

分类专栏： javascript 文章标签： javascript mouseDown mouseUp mouseClick eventPhase

本文链接：https://blog.csdn.net/mark_to_win/article/details/88642327

版权

javascript 专栏收录该内容

119 篇文章 0 订阅

订阅专栏

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 ";