鼠标事件
 
鼠标事件有很多：click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout。这些方法的语义化都很好，大家看名字基本都懂是什么意思。
 
其中，contextmenu是右键出现菜单事件，并不是右键事件。
 
click是一个完整的点击事件，包括mousedown和mouseup。
 
mouseover和mouseout是一组事件，对应于鼠标的移入移出事件。
 
• 所有的鼠标事件都有clientX和clientY，代表的是鼠标点击的位置，我们可以通过e.clientX和e.clentY来查看。
 
• 左键点击的顺序是：mousedown、mouseup、click
 
var firstTime,lastTime,flag = false;
 document.onclick = function (e) {
      console.log(‘click’);
  }
  document.onmousedown = function (e) {
      console.log(‘mousedown’);
 }
  document.onmouseup = function (e) {
     console.log(‘mouseup’);
 }
 
输出的结果是mousedown、mouseup、click。
 
• 当我们同时绑定了click事件和mousedown事件后，如何解决mousedown和click的冲突问题？
 
其实方法很简单，我们可以通过按下鼠标的事件来判断是执行click还是mousedown事件。
 
var firstTime,lastTime,flag = false;
  document.onclick = function (e) {
      if (flag) {
          console.log(‘click’);
      }else {
          console.log(‘mousedown’);
      }
  }
  document.onmousedown = function (e) {
      firstTime = new Date().getTime();
  }
  document.onmouseup = function (e) {
      lastTime = new Date().getTime();
      if (lastTime - firstTime < 200) {
         flag = true;
      }else {
          flag = false;
      }
  }
 
• 如何判断鼠标点击的是左键还是右键？
 
click事件永远都是左键，有左键和右键的区别的是mousedown事件。
 
再mousedown的事件对象中有一个属性叫做button，这个属性的值是0的时候代表我们按下的是左键，1的时候代表按下的中键，2的时候代表按下的是右键。
 
 document.onmousedown = function (e) {
     if (e.button == 0) {
         console.log(‘left’);
      }else if (e.button == 1) {
          console.log(‘mid’);
      }else {
         console.log(‘right’);
      }
  }
 
这里我们就可以重新回顾一下拖拽事件了：
 
var div = document.getElementsByTagName(‘div’)[0]
  function drag(elem) {
      var disX,dixY;
    addEvent(elem, ‘mousedown’, function (e) {
          var event = e || window.event;
          disX = event.clientX - parseInt(getStyle(elem, ‘left’));
          disY = event.clientY - parseInt(getStyle(elem, ‘top’));
          addEvent(document, ‘mousemove’, mouseMove);
          addEvent(document, ‘mouseup’, mouseUp);
          stopBubble(e);
          cancelHandler(e);
      });
   
      function mouseMove(e) {
          var event = e || window.event;
          elem.style.left = event.clientX - disX + ‘px’;
          elem.style.top = event.clientY - disY + ‘px’;
     }
      function mouseUp (e) {
          removeEvent(document, ‘mousemove’, mouseMove);
          removeEvent(document, ‘mouseup’, arguments.callee);
     }
 }
 
• 针对鼠标帧频过快的问题，IE中有一个也可以说是另一种事件捕获的方法——domEle.setCapture()。
 
调用这个方法之后，页面后续的所有操作就会全部都归于这个domEle上，比如div有一个拖拽事件，不过mousemove绑定在div上，只要调用了这个方法，当鼠标拖拽过程中鼠标移出了div，这个时候有效的鼠标移动就变成了document上的mousemove事件了，但是它还是归于了div上，因此div还是可以跟着鼠标移动。
 
同时还有一个domEle.releaseCapture()方法可以来释放这个捕获行为。

 
这里写目录标题
 
一、 常用到的鼠标事件
鼠标点击
鼠标移动
鼠标经过
鼠标来源
鼠标定位
鼠标按键

 
一、 常用到的鼠标事件
 
在 JavaScript 中，鼠标事件是 Web 开发中最常用的事件类型，鼠标事件类型详细说明如下表所示：
 鼠标事件类型
 
项目
Value
click
单击鼠标左键时发生，如果右键也按下则不会发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事件
dblclick
双击鼠标左键时发生，如果右键也按下则不会发生
mousedown
单击任意一个鼠标按钮时发生
mouseout
鼠标指针位于某个元素上且将要移出元素的边界时发生
mouseover
鼠标指针移出某个元素到另一个元素上时发生
mouseup
松开任意一个鼠标按钮时发生
mousemove
鼠标在某个元素上时 持续 发生
eg：在下面示例中，定义在段落文本范围内侦测鼠标的各种动作，并在文本框中实时显示各种事件的类型，以提示当前的用户行为。
 
<p>鼠标事件</p>
<input type="text" id="text" />
<script>
    var p1 = document.getElementsByTagName("p")[0];  //获取段落文本的引用指针
    var t = document.getElementById("text");  //获取文本框的指针引用
    function f () {  //事件侦测函数
        var event = event || window.event;  //标准化事件对象
        t.value = (event.type);  //获取当前事件类型
    }
    p1.onmouseover = f;  //注册鼠标经过时事件处理函数
    p1.onmouseout = f;  //注册鼠标移开时事件处理函数
    p1.onmousedown = f;  //注册鼠标按下时事件处理函数
    p1.onmouseup = f;  //注册鼠标松开时事件处理函数
    p1.onmousemove = f;  //注册鼠标移动时事件处理函数
    p1.onclick = f;  //注册鼠标单击时事件处理函数
    p1.ondblclick = f;  //注册鼠标双击时事件处理函数
</script>
 
鼠标点击
 
鼠标点击事件包括 4 个：click（单击）、dblclick（双击）、mousedown（按下）和 mouseup（松开）。其中 click 事件类型比较常用，而 mousedown 和 mouseup 事件类型多用在鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为 false 时，会禁止绑定对象的默认行为。
 
eg：在下面示例中，当定义超链接指向自身时（多在设计过程中 href 属性值暂时使用 “#”或“?”表示），可以取消超链接被单击时的默认行为，即刷新页面。
 
<a name="tag" id="tag" href="#">a</a>
<script>
    var a = document.getElementsByTagName("a");  //获取页面中所有超链接元素
    for (var i = 0; i < a.length; i ++) {  //遍历所有a元素
        if ((new RegExp(window.location.href)).test(a[i].href)) {
            //如果当前超链接href属性中包含本页面的URL信息
            a[i].onclick = function () {  //则为超链接注册鼠标单击事件
                return false;  //将禁止超链接的默认行为
            }
        }
    }
</script>
 
鼠标移动
 
mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度。
 示例
 下面示例演示了如何综合应用各种鼠标事件实现页面元素拖放操作的设计过程。实现拖放操作设计需要解决以下几个问题。
 定义拖放元素为绝对定位以及设计事件的响应过程，这个比较容易实现。
 清楚几个坐标概念：按下鼠标时的指针坐标，移动中当前鼠标指针坐标，松开鼠标时的指针坐标，拖放元素的原始坐标，拖动中的元素坐标。
 算法设计：按下鼠标时，获取被拖放元素和鼠标指针的位置，在移动中实时计算鼠标偏移的距离，并利用该偏移距离加上被拖放元素的原坐标位置，获得拖放元素的实时坐标。
 
如下图所示，其中变量 ox 和 oy 分别记录按下鼠标时被拖放元素的纵横坐标值，它们可以通过事件对象的 offsetLeft 和 offsetTop 属性获取。变量 mx 和 my 分别表示按下鼠标时，鼠标指针的坐标位置。而 event.mx 和 event.my 是事件对象的自定义属性，用它们来存储当鼠标移动时鼠标指针的实时位置。
 
当获取了上面 3 对坐标值之后，就可以动态计算拖动中元素的实时坐标位置，即 x 轴值为 ox+event.mx-mx，y 轴为 oy+event.my-my。当释放鼠标按钮时，就可以释放事件类型，并记下松开鼠标指针时拖动元素的坐标值，以及鼠标指针的位置，留待下一次拖放操作时调用。
 
 
<div id="box" ></div>
<script>
    // 初始化拖放对象
    var box = document.getElementById("box");
    // 获取页面中被拖放元素的引用指针
    box.style.position = "absolute";  // 绝对定位
    box.style.width = "160px";  // 定义宽度
    box.style.height = "120px";  // 定义高度
    box.style.backgroundColor = "red";  // 定义背景色
    // 初始化变量，标准化事件对象
    var mx, my, ox, oy;  // 定义备用变量
    function e(event){  // 定义事件对象标准化函数
        if( ! event){  // 兼容IE浏览器
            event = window.event;
            event.target = event.srcElement;
            event.layerX = event.offsetX;
            event.layerY = event.offsetY;
        }
        event.mx = event.pageX || event.clientX + document.body.scrollLeft;
        // 计算鼠标指针的x轴距离
        event.my = event.pageY || event.clientY + document.body.scrollTop;
        // 计算鼠标指针的y轴距离
        return event;  // 返回标准化的事件对象
    }
     // 定义鼠标事件处理函数
    document.onmousedown = function(event){  // 按下鼠标时，初始化处理
        event = e(event);  // 获取标准事件对象
        o = event.target;  // 获取当前拖放的元素
        ox = parseInt(o.offsetLeft);  // 拖放元素的x轴坐标
        oy = parseInt(o.offsetTop);  // 拖放元素的y轴坐标
        mx = event.mx;  // 按下鼠标指针的x轴坐标
        my = event.my;  // 按下鼠标指针的y轴坐标
        document.onmousemove = move;  // 注册鼠标移动事件处理函数
        document.onmouseup = stop;  // 注册松开鼠标事件处理函数
    }
    function move(event){  // 鼠标移动处理函数
        event = e(event);
        o.style.left = ox + event.mx - mx  + "px";  // 定义拖动元素的x轴距离
        o.style.top = oy + event.my - my + "px";  // 定义拖动元素的y轴距离
    }
    function stop(event){  // 松开鼠标处理函数
       event = e(event);
       ox = parseInt(o.offsetLeft);  // 记录拖放元素的x轴坐标
       oy = parseInt(o.offsetTop);  // 记录拖放元素的y轴坐标
       mx = event.mx ;  // 记录鼠标指针的x轴坐标
       my = event.my ;  // 记录鼠标指针的y轴坐标
       o = document.onmousemove = document.onmouseup = null;
       // 释放所有操作对象
    }
</script>
 
鼠标经过
 
鼠标经过包括移过和移出两种事件类型。当移动鼠标指针到某个元素上时，将触发 mouseover 事件；而当把鼠标指针移出某个元素时，将触发 mouseout 事件。如果从父元素中移到子元素中时，也会触发父元素的 mouseover 事件类型。
 
eg:
 在下面示例中，分别为 3 个嵌套的 div 元素定义了 mouseover 和 mouseout 事件处理函数，这样当从外层的父元素中移动到内部的子元素中时，将会触发父元素的 mouseover 事件类型，但是不会触发 mouseout 事件类型。
 
<div>
    <div>
        <div>盒子</div>
    </div>
</div>
<script>
    var div = document.getElementsByTagName("div");
    // 获取3个嵌套的div元素
    for(var i=0;i<div.length;i++){    // 遍历嵌套的div元素
        div[i].onmouseover = function(e){   // 注册移过事件处理函数
            this.style.border = "solid blue";
        }
        div[i].onmouseout = function(){   // 注册移出事件处理函数
            this.style.border = "solid red";
        }
    }
</script>
 
鼠标来源
 
当一个事件发生后，可以使用事件对象的 target 属性获取发生事件的节点元素。如果在 IE 事件模型中实现相同的目标，可以使用 srcElement 属性。
 eg:
 在下面示例中，当鼠标移过页面中的 div 元素时，会弹出提示对话框，提示当前元素的节名称。
 
<div>div元素</div>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.onmouseover = function(e){ // 注册mouseover事件处理函数
        var e = e || window.event;  // 标准化事件对象，兼容DOM和IE事件模型
        var o = e.target || e.srcElement;  // 标准化事件属性，获取当前事件的节点
        alert(o.tagName);      // 返回字符串“DIV”
    }
</script>
 
在 DOM 事件模型中还定义了 currentTarget 属性，当事件在传播过程中（如捕获和冒泡阶段）时，该属性值与 target 属性值不同。因此，一般在事件处理函数中，有你哥哥使用该属性而不是 this 关键词获取当前对象。
 
除了使用上面提到的通用事件属性外，如果想获取鼠标指针来移动某个元素，在 DOM 事件模型中可以使用 relatedTarget 属性获取当前事件对象的相关节点元素；而在 IE 事件模型中，可以使用 fromElement 获取 mouseover 事件中鼠标移到过的元素，使用 toElement 属性获取在 mouseout 事件中鼠标移到的文档元素。
 
eg:
 在下面示例中，当鼠标移到 div 元素上时，会弹出“BODY”字符提示信息，说明鼠标指针是从 body 元素过来的；而移开鼠标指针时，又弹出“BODY”字符提示信息，说明离开 div 元素将要移到的元素。
 
<div>div元素</div>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.onmouseover = function(e){
        var e = e || window.event;
        var o = e.relatedTarget || e.fromElement;  //标准化事件属性，获取与当前事件相关的节点
        alert(o.tagName);
    }
    div.onmouseout = function(e){
        var e = e || window.event;
        var o = e.relatedTarget || e.toElement;  // 标准化事件属性，获取与当前事件相关的节点
        alert(o.tagName);
    }
</script> 
 
鼠标定位
 
当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。
 
属性
说明
兼容性
clientX
以浏览器窗口左上顶角为原点，定位 x 轴坐标
所有浏览器，不兼容 Safari
clientY
以浏览器窗口左上顶角为原点，定位 y 轴坐标
所有浏览器，不兼容 Safari
offsetX
以当前事件的目标对象左上顶角为原点，定位 x 轴坐标
所有浏览器，不兼容 Mozilla
offsetY
以当前事件的目标对象左上顶角为原点，定位 y 轴坐标
所有浏览器，不兼容 Mozilla
pageX
以 document 对象（即文档窗口）左上顶角为原点，定位 x 轴坐标
所有浏览器，不兼容 IE
pageY
以 document 对象（即文档窗口）左上顶角为原点，定位 y 轴坐标
所有浏览器，不兼容 IE
screenX
计算机屏幕左上顶角为原点，定位 x 轴坐标
所有浏览器
screenY
计算机屏幕左上顶角为原点，定位 y 轴坐标
所有浏览器
layerX
最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 x 轴坐标
Mozilla 和 Safari
layerY
最近的绝对定位的父元素（如果没有，则为 document 对象）左上顶角为元素，定位 y 轴坐标
Mozilla 和 Safari
eg:
 下面介绍如何配合使用多种鼠标坐标属性，以实现兼容不同浏览器的鼠标定位设计方案。
 首先，来看看 screenX 和 screenY 属性。这两个属性获得了所有浏览器的支持，应该说是最优选用属性，但是它们的坐标系时计算机屏幕，也就是说，以计算机屏幕左上角为定位原点。这对于以浏览器窗口为活动空间的网页来说没有任何价值。因为不同的屏幕分辨率，不同的浏览器窗口大小和位置，都使得在网页中定位鼠标成为一件很困难的事情。
 
其次，如果以 document 对象为坐标系，则可以考虑选用 pageX 和 pageY 属性实现在浏览器窗口中进行定位。这对于设计鼠标跟随来说是一个好主意，因为跟随元素一般都以绝对定位的方式在浏览器窗口中移动，在 mousemove 事件处理函数中把 pageX 和 pageY 属性值传递给跟绝对定位元素的 top 和 left样式属性即可。
 
IE 事件模型不支持上面的属性，为此还需寻求兼容 IE 的方法。而看 clientX 和 clientY 属性是以 window 对象为坐标系，且 IE 事件模型支持它们，可以选用它们。不过考虑 window 等对象可能出现的滚动条偏移量，所以还应加上相对于 window 对象的页面滚动的偏移量。
 
var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
    posX = event.pageX;
    posY = event.pageY;
} else if (event.clientX || event.clientY) {
    posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
    posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
 
在上面代码中，先检测 pageX 和 pageY 属性是否存在，如果存在则获取它们的值；如果不存在，则检测并获取 clientX 和 clientY 属性值，然后加上 document.documentElement 和 document.body 对象的 scrollLeft 和 scrollTop 属性值，这样在不同浏览器中就获得了相同的坐标值。
 
eg2:
 封装鼠标定位代码。设计思路：能够根据传递的具体对象，以及相对鼠标指针的偏移量，命令该对象能够跟随水保移动。
 
先定义一个封装函数，设计函数传入参数为对象引用指针、相对鼠标指针的偏移距离，以及事件对象。然后封装函数能够根据事件对象获取鼠标的坐标值，并设置该对象为绝对定位，绝对定位的值为鼠标指针当前的坐标值。
 
var pos = function (o, x, y, event) {  //鼠标定位赋值函数
    var posX = 0, posY = 0;  //临时变量值
    var e = event || window.event;  //标准化事件对象
    if (e.pageX || e.pageY) {  //获取鼠标指针的当前坐标值
        posX = e.pageX;
        posY = e.pageY;
    } else if (e.clientX || e.clientY) {
        posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
        posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
    }
    o.style.position = "absolute";  //定义当前对象为绝对定位
    o.style.top = (posY + y) + "px";  //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
    o.style.left = (posX + x) + "px";  //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
}
 
下面测试封装代码。为 document 对象注册鼠标移动事件处理函数，并传入鼠标定位封装函数，传入的对象为 

  元素，设置其位置向鼠标指针右下方偏移（10,20）的距离。考虑到 DOM 事件模型通过参数形式传递事件对象，所以不要忘记在调用函数中还要传递事件对象。

 
<div id="div1">鼠标追随</div>
<script>
    var div1 = document.getElementById("div1");
    document.onmousemove = function (event) {
        pos (div1, 10, 20, event);
    }
</script>
 
eg3:
 获取鼠标指针在元素内的坐标。使用 offsetX 和 offsetY 属性可以实现这样的目标，但是 Mozilla 浏览器不支持。可以选用 layerX 和 layerY 属性来兼容 Mozilla 浏览器。
 
var event = event || window.event;
if (event.offsetX || event.offsetY) {  //适用非Mozilla浏览器
    x = event.offsetX;
    y = event.offsetY;
} else if (event.layerX || event.layerY) {  //兼容Mozilla浏览器
    x = event.layerX;
    y = event.layerY;
}
 
但是，layerX 和 layerY 属性是以绝对定位的父元素为参照物，而不是元素自身。如果没有绝对定位的父元素，则会以 document 对象为参照物。为此，可以通过脚本动态添加或者手动添加的方式，设计在元素的外层包围一个绝对定位的父元素，这样可以解决浏览器兼容问题。考虑到元素之间的距离所造成的误差，可以适当减去 1 个或几个像素的偏移量。
 
<input type="text" id="text" />
<span style="position:absolute;">
    <div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
</span>
<script>
    var t = document.getElementById("text");
    var div1 = document.getElementById("div1");
    div1.onmousemove = function (event) {
        var event = event || window.event;  //标准化事件对象
        if (event.offsetX || event.offsetY) {
            t.value = event.offsetX + "" + event.offsetY;
        } else if (event.layerX || event.layerY) {
            t.value = (event.layerX-1) + "" + (event.layerY-1);
        }
    }
</script>
 
这种做法能够解决在元素内部定位鼠标指针的问题。但是，由于在元素外面包裹了一个绝对定位的元素，会破坏整个页面的结构布局。在确保这种人为方式不会导致结构布局混乱的前提下，可以考虑选用这种方法。
 
鼠标按键
 
通过事件对象的 button 属性可以获取当前鼠标按下的键，该属性可用于 click、mousedown、mouseup 事件类型。不过不同模型的约定不同，具体说明如下表所示。
 
鼠标事件对象的 button 属性
 
单击
IE 事件模型
DOM 事件模型
左键
1
0
右键
2
2
中键
4
1
IE 事件模型支持位掩码技术，它能够侦测到同时按下的多个键。例如，同时按下左右键，则 button 属性值为 1+2=3；同时按下中键和右键，则 button 属性值为 2+4=6；同时按下左键和中键，则 button 属性值为 1+4=5；同时按下 3 个键，则 button 属性值为 1+2+4=7。
 
但是 DOM 模型不支持这种掩码技术，如果同时按下多个键，就不能够准确侦测。例如，按下右键（2）与同时按下左键和右键（0+2=2）的值是相同的。因此，对于 DOM 模型来说，这种 button 属性约定值存在很大的缺陷。不过，在实际开发中很少需要同时检测多个鼠标按钮问题，一般仅需要探测鼠标左键或右键单击行为。
 
eg:
 下面代码能够监测右键单击操作，并阻止发生默认行为。
 
document.onclick = function (e) {
    var e = e || window.event;  //标准化事件对象
    if (e.button == 2) {
        e.preventDefault();
        return false;
    }
}    
 
当鼠标单击事件发生时，会触发很多事件：mousedown、mouseup、click、dblclick。这些事件响应的顺序如下：
 
 
 
mousedown → mouseup → click → mousedown → mouseup → click → dblclick
 
 
当鼠标在对象间移动时，首先触发的事件是 mouseout，即在鼠标移出某个对象时发生。接着，在这两个对象上都会触发 mousemove 事件。最后，在鼠标进入对象上触发 mouseover 事件。

鼠标事件
 
对于鼠标事件，相信大家都不陌生。鼠标事件分很多种，其中有之前提到的单击，因为单击事件比较重要作者就早点介绍了。鼠标事件包含单击、双击、拖动右击等。最常用的就是单击。但是Selenium是比较强大的事吧！哈哈，Selenium也提供了许多的鼠标事件，供大家使用，下面逐一介绍。鉴于单击前面已介绍过，所以后面就不再介绍单击事件了。
 
 
一、右击鼠标事件
 右击事件一般是在有附加菜单的情况下使用，或者与鼠标事件配合使用，在一般的页面上你会发现很少有前段会单独做一个右击的菜单。一般都是浏览器默认的菜单，只有一些做的比较好的网页才会做右击菜单。例如百度网盘。
 创建鼠标事件思路：1、定位元素；2、创建一个动作 ；3将元素放入动作中；4、执行动作
 类名：contextClickDemo
 
driver.get("https://www.baidu.com");
WebElement e=driver.findElement(By.id("kw"));//定位百度搜索输入框
Actions action=new Actions(driver);//创建一个动作对象
action.contextClick(e).perform();  //将定位好的百度搜索输入框对象传到动作内并执行
 
注意：在我们执行鼠标事件的过程中，一定要在末尾增加.perform()不然Selenium会将鼠标动作保存在缓冲区中而不去执行。
 
二、双击鼠标事件
 双击鼠标事件，在平常使用过程中，对于大家对于双击鼠标事件应该不陌生。Windows界面的图标就是双击执行的。如果在Web页面上的话，一般除了特例之外就是用来选择单词，或者一个词。但是不得不说双击事件还是比较常见的事件之一。
 类名：doubleClickDemo
 
driver.get("https://www.baidu.com");
WebElement e=driver.findElement(By.id("kw"));//定位百度搜索输入框
e.sendKeys("Softly");Thread.sleep(2000);//输入Softly并等待2秒
Actions action=new Actions(driver);//创建一个动作对象
action.doubleClick(e).perform();  //将定位好的百度搜索输入框对象传到动作内并执行
 
三、拖动鼠标事件
 拖动鼠标由两个元素一个动作组成。可以理解成两个位置，从A位置按住鼠标然后移动到B位置，再释放鼠标。这一系列就是将鼠标拖动拆分。在编写自动化脚本的过程中我们也需要这种思想。将一个动作拆分组合。拖动鼠标又分两种，一种是将对象拖动到某一对象上dragAndDrop(WebElement,WebElement);。还有一种是指将对象拖动到某一个坐标上dragAndDropBy(WebElement,int X,int Y);。
 
 
类名：dragAndDropDemo
 
dragAndDrop(WebElement,WebElement);示例：
 
	driver.get("https://www.baidu.com/cache/sethelp/help.html");
	Actions action=new Actions(driver);//创建一个动作对象
	WebElement e=driver.findElement(By.cssSelector("html body div.content h3"));//定位首标题
	WebElement e1=driver.findElement(By.cssSelector(".detail"));
	e1=e1.findElement(By.tagName("h6"));//利用层级定位定位h6标题
	action.dragAndDrop(e,e1).perform();//拖动鼠标从e--->e1

dragAndDropBy(WebElement,int X,int Y);示例：
driver.get("https://www.baidu.com/cache/sethelp/help.html");
	Actions action=new Actions(driver);//创建一个动作对象
	WebElement e=driver.findElement(By.cssSelector("html body div.content h3"));//定位网页首标题
	action.dragAndDropBy(e,300,300).perform();//拖动鼠标从e对象到X300Y300的位置
 
四、移动鼠标事件
 移动鼠标事件，在Web中一般是触发事件，在鼠标移动到某一元素时触发Js，弹出浮层，或者菜单等等。可用于元素定位的时候因没有移动鼠标触发元素而引起的定位不到元素的情况。像这类的触发在Web网页中是经常会遇到的。比如百度首页就存在类似的菜单。
 
类名：moveByDemo
 
moveToElement();示例：
 
第一种：直接传对象
 
driver.get(“https://www.baidu.com”);
 Actions action=new Actions(driver);//创建一个动作对象
 WebElement e=driver.findElement(By.cssSelector(“html body div#wrapper div#head div.head_wrapper div#u1 a.pf”));//定位百度页面的设置
 action.moveToElement(e).perform();//将鼠标移动到百度设置的元素上
 
第二种：传对象和对象的位置
 
driver.get("https://www.baidu.com");
	Actions action=new Actions(driver);//创建一个动作对象
	WebElement e=driver.findElement(By.cssSelector("html body div#wrapper div#head div.head_wrapper div#u1 a.pf"));//定位百度页面的设置
	action.moveToElement(e,5,5).perform();  //移动到e对象的X轴5Y轴5位置
 
注意：moveToElement();第二种鼠标事件时移动到某一元素的位置，以元素的左上角为坐标（0,0）为起点
 moveByOffset();示例：
 driver.get(“https://www.baidu.com”);
 Actions action=new Actions(driver);//创建一个动作对象
 action.moveByOffset(918, 19).perform();//将鼠标移动到百度设置的元素上
 
五、长按鼠标事件
 长按鼠标事件是指在某一对象上单机鼠标左键，而不松开的操作。但是这就涉及到一个问题，一旦长按鼠标，那么按多长时间呢？这是个值得考虑的问题；当然了这个问题也比较好解决。在Selenium中鼠标事件提供了释放鼠标的方法release();。
 
类名：clickAndHold();
 
driver.get("https://www.baidu.com");
	Actions action=new Actions(driver);//创建一个动作对象
	WebElement a=driver.findElement(By.name("tj_briicon"));
	action.moveToElement(a).perform();
	WebElement e=driver.findElement(By.cssSelector(".bdbriimgitem_1"));//定位百度糯米
	action.clickAndHold(e).perform();//长按百度糯米下面的链接变蓝
	Thread.sleep(2000);
	action.release().perform();//释放鼠标跳转到百度糯米页面

0.前言
 
有时候，我们的MouseArea区域重叠了，这时候默认是最上层的MouseArea接收鼠标事件，而我们可能需要底层也能接收这个事件。虽然可以关联两个MouseArea的信号，但是这种操作局限性比较大，耦合性太强，某个MouseArea并不能被外部所见等等。在Qt Widgets中可以通过setAttribute(Qt::WA_TransparentForMouseEvents,true)来进行鼠标穿透，而在QML中我们可以通过propagateComposedEvents属性或者使用mouse.accepted=false来完成部分鼠标事件的传递。
 
Qt官方文档如是说：
 
 
 
propagateComposedEvents保存组合的鼠标事件是否将自动传播到与它重叠但在视觉堆叠顺序中较低的其他MouseArea 。默认情况下，此属性为false。这里面包含几个组成事件：clicked，doubleClicked和pressAndHold。它们由基本的鼠标事件组成（比如pressed），并且与基本事件相比可以不同地传播。
 
 
如果propagateComposedEvents设置为true，则组合事件将自动传播到场景中相同位置的其他MouseArea。每个事件将按照堆栈顺序传播到其下方的下一个启用的 MouseArea，并向下传播此可视层次结构，直到MouseArea接受该事件为止。与pressed事件不同，如果没有处理程序，则组合事件将不会被自动接受。
 
 
也就是说，类似clicked的组合事件，只要把propagateComposedEvents设置为true，在没有写处理程序的时候会自动的传递事件，有处理程序则加上mouse.accepted=false也会传递。而pressed等基本事件，只需要在处理程序中写上mouse.accepted=false就会传递下去，不用设置propagateComposedEvents。
 
1.组合事件的传递
 
直接上代码：
 
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480

    MouseArea{
        anchors.fill: parent
        onClicked: console.log("~root clicked")
        onDoubleClicked: console.log("~root double")
        onPressAndHold: console.log("~root hold")
    }

    //item的层级在root之上（因为他写在mousearea的后面，又是同级的）
    Rectangle{
        width: 200
        height: 200
        color: "green"

        MouseArea{
            anchors.fill: parent
            //是否传递到被覆盖的MouseArea
            propagateComposedEvents: true
            onClicked: {
                console.log("item clicked")
                //组合事件可以不写处理程序，或者accepted为false
                mouse.accepted = false
            }
            onDoubleClicked: console.log("item double")
            //onPressAndHold: console.log("item hold")
        }
    }
}
 
 
代码中，我们设置propagateComposedEvents为true，开启组合事件的传递，通过打印我们可以看到，没有写处理程序的hold和写了mouse.accepted = false的click传递到了被遮挡的MouseArea，而doubleClick则没有传递。
 
2.基本事件的传递
 
一般我们主要关注press和release事件，而release又是跟随press的，如果press设置mouse.accepted=false，那么relase只会在接收press的MouseArea里响应，即便它设置为true。如果press没有设置，那么即便release设置mouse.accepted=false，也是没有用的。代码如下：
 
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480

    MouseArea{
        anchors.fill: parent
        onPressed: console.log("~root pressed")
        onReleased: console.log("~root released")
    }

    //item的层级在root之上（因为他写在mousearea的后面，又是同级的）
    Rectangle{
        width: 200
        height: 200
        color: "green"

        MouseArea{
            anchors.fill: parent
            //是否传递到被覆盖的MouseArea
            //propagateComposedEvents: true
            onPressed: {
                console.log("item pressed")
                mouse.accepted=false
            }
            onReleased: {
                console.log("item released")
                mouse.accepted=true
            }
        }
    }
}
 
 
 
通过打印可以看到，release被接收press的MouseArea直接处理了，也就没有打印 “item released” 。
 
除了点击还有hover相关事件我们也比较常用，相关的主要有entered、exited、positionChanged等。默认鼠标hover是没有开启的，这些事件是由我们按下鼠标时才会激活，我们把MouseArea的hoverEnabled设置为true就能处理鼠标的移动了。
 
如果上层的MouseArea没有设置hoverEnabled，那么hover相关的事件自然就会传递下去，要是鼠标按下时的hover操作也传递的话，可以写上onPressed: mouse.accepted=false。但是如果上层MouseArea处理了entered或者exited就尴尬了，这两个信号里没有mouse参数，没法设置mouse.accepted，而postionChanged就算有mouse参数，设置了也没效果。
 
测试的结论就是hover如果没有设置hoverEnabled，那么会传递下去；如果设置为了true，那么就只能自己享用相关的事件了。如果谁知道有什么方式设置的话，告诉我下。
 
3.混合情况
 
有时候混合事件（如pressed）和基本事件（如clicked）可能都在使用，这就要注意其中的关联关系，比如clicked是和press相关的。如果press设置了mouse.accepted=false，那么即便不把propagateComposedEvents设置为true，pressed和clicked也会传递下去：
 
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480

    MouseArea{
        anchors.fill: parent
        onPressed: console.log("~root pressed")
        onClicked: console.log("~root clicked")
    }

    //item的层级在root之上（因为他写在mousearea的后面，又是同级的）
    Rectangle{
        width: 200
        height: 200
        color: "green"

        MouseArea{
            anchors.fill: parent
            //是否传递到被覆盖的MouseArea
            //propagateComposedEvents: true
            onPressed: mouse.accepted=false
        }
    }
}
 
 
 
可以看到，因为pressed设置mouse.accepted=false，clicked事件也在pressed接受的MouseArea触发了。
 
让我们来看个更复杂点的例子：
 
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480

    MouseArea{
        anchors.fill: parent
        onPressed: console.log("~root pressed")
        onClicked: console.log("~root clicked")
    }

    Rectangle{
        width: 200
        height: 200
        color: "green"

        MouseArea{
            anchors.fill: parent
            //是否传递到被覆盖的MouseArea
            propagateComposedEvents: true
            onPressed: {
                console.log("item pressed")
                mouse.accepted=true
            }
            /*onClicked: {
                console.log("item clicked")
                mouse.accepted=false
            }*/
        }
    }
    MouseArea{
        anchors.fill: parent
        onPressed: {
            console.log("surface pressed")
            mouse.accepted=false
        }
        onClicked: {
            console.log("surface clicked")
            mouse.accepted=false
        }
    }
}
 
 
最上层的surface把pressed设置了mouse.accepted=false，所以即便没有设置propagateComposedEvents，组合事件clicked也传递下去了。而中间层的item只处理了press，而又把propagateComposedEvents设置为了true，所以clicked最后传递到了~root上去了。
 
（2019-11-29 添加内容）
 
覆盖在类似Control2里的PushButton、TextField这些控件上时，需要用 "onPressed: mouse.accepted=false; " 来传递下去。
 
最后的总结就是：组合事件如clicked主要由propagateComposedEvents设置，基本事件如pressed主要由mouse.accepted设置，组合事件会被基本事件影响。
 
4.参考
 
Qt文档：https://doc.qt.io/qt-5/qml-qtquick-mousearea.html#propagateComposedEvents-prop
 
博客：https://blog.csdn.net/qq_43248127/article/details/97273421
 
博客：https://blog.csdn.net/wanghualin033/article/details/78155544