精华内容
下载资源
问答
  • 鼠标事件

    千次阅读 2019-01-21 13:22:14
    鼠标事件 鼠标事件有很多:click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout。这些方法的语义化都很好,大家看名字基本都懂是什么意思。 其中,contextmenu是右键出现菜单事件,并不是右键...

    鼠标事件

    鼠标事件有很多: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()方法可以来释放这个捕获行为。

    展开全文
  • JS鼠标事件(非常详细)

    千次阅读 2020-12-15 09:14:01
    一、 常用到的鼠标事件 在 JavaScript 中,鼠标事件是 Web 开发中最常用的事件类型,鼠标事件类型详细说明如下表所示: 鼠标事件类型 项目 Value click 单击鼠标左键时发生,如果右键也按下则不会发生。当...

    一、 常用到的鼠标事件

    在 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 事件模型
    左键10
    右键22
    中键41

    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鼠标事件

    千次阅读 热门讨论 2019-08-06 11:26:28
    鼠标事件 对于鼠标事件,相信大家都不陌生。鼠标事件分很多种,其中有之前提到的单击,因为单击事件比较重要作者就早点介绍了。鼠标事件包含单击、双击、拖动右击等。最常用的就是单击。但是Selenium是比较强大的事...

    鼠标事件

    对于鼠标事件,相信大家都不陌生。鼠标事件分很多种,其中有之前提到的单击,因为单击事件比较重要作者就早点介绍了。鼠标事件包含单击、双击、拖动右击等。最常用的就是单击。但是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();//释放鼠标跳转到百度糯米页面
    
    展开全文
  • QML鼠标事件传递(鼠标穿透)

    千次阅读 2019-11-18 14:24:55
    有时候,我们的MouseArea区域重叠了,这时候默认是最上层的MouseArea接收鼠标事件,而我们可能需要底层也能接收这个事件。虽然可以关联两个MouseArea的信号,但是这种操作局限性比较大,耦合性太强,某个MouseArea并...

    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

    展开全文
  • 常见的鼠标事件

    千次阅读 2019-09-05 10:38:57
    常见的鼠标事件有:单击、双击、鼠标移动上去、鼠标离开、鼠标按下、按下后松开、获取焦点、失去焦点等几类。每个事件的写法也都有很多种。 为了方便,我是引入jQuery库进行操作的。 1、单击 写法1:直接使用 <p ...
  • IDEA 插件开发 鼠标事件

    千次阅读 2020-08-18 16:04:02
    文章目录IDEA 插件开发 鼠标事件 IDEA 插件开发 鼠标事件 package com.wretchant.fredis.event; import javax.swing.*; import java.awt.*; import java.awt.event.MouseAdapter; import java.awt.event....
  • Opencv鼠标事件

    千次阅读 2019-03-20 09:37:28
    Opencv中的鼠标事件,例如在界面中通过鼠标左键任意位置,显示点坐标,并将改点存储到points中,为后续使用。 定义鼠标事件: #include "opencv2/core.hpp" #include "opencv2/highgui/highgui.hpp" #include ...
  • OpenCV处理鼠标事件

    千次阅读 2020-10-23 08:00:27
    1.创建鼠标事件回调函数,当鼠标事件发生时就会被执行。 比如左键按下,松开,左键双击等。可以通过鼠标事件获得相对应的图片上的坐标,根据这些信息可以做想做的事。所有鼠标事件回调函数都有一个统一的格式,不同...
  • pyqt5事件与鼠标事件

    千次阅读 2020-02-26 11:47:41
    pyqt5事件与鼠标事件 一、每个事件都被封装成相应的类: pyqt中,每个事件类型都被封装成相应的事件类,如鼠标事件为QMouseEvent,键盘事件为QKeyEvent等。而它们的基类是QEvent。 二、基类QEvent的几个重要方法...
  • 4. Python OpenCV 中鼠标事件相关处理与常见问题解决方案 本篇博客主要分析 cv2.setMouseCallback 函数,以及该函数在日常编码中出现问题是如何进行解决。 本函数主要是 OpenCV 中用来处理鼠标相关事件的函数,通过...
  • threejs开发小实例,实现了创建场景灯光,摄像机,对物体的移动,旋转,以及摄像机的移动旋转,动画效果,灯光设置(源代码)
  • JS 事件基础 Document是一个最顶级的父节点,两个子节点分别为<!DOCTYPE>和HTML。 window.onload = function() { alert(document.childNodes[0].tagName); [0]=undefined [1]=HTML } Event对象,因为存在...
  • 获取鼠标事件 在第三节的示例中,假如我们需要获取鼠标事件,那应该怎么办呢?这时,我们可以引入$event变量,具体如下: import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-...
  • 这是我在做一个简单的俄罗斯方块游戏时碰到的问题,在这里记录一下以便不再出现这种问题。
  • 鼠标事件大全详解

    千次阅读 多人点赞 2019-08-20 15:21:53
    click:单击事件。 dblclick:双击事件。 mousedown:按下鼠标键时触发。 mouseup:释放按下的鼠标键时触发。 mousemove:鼠标移动事件。 mouseover:移入事件。...mouseover事件和mouseenter事件,都是鼠标进入...
  • python+openCV鼠标事件

    千次阅读 2019-04-25 17:18:17
    鼠标事件即包括:左键按下,左键松开,左键双击,鼠标移动等,主要需掌握函数cv2.setMouseCallback(windowName, onMouse [, param])及其对应的回调函数。下面一一进行介绍。 cv2.setMouseCallback(windowName, onMouse ...
  • Cesium鼠标事件汇总

    千次阅读 2019-05-22 16:43:11
    限制鼠标的视图控制 // 禁用放大缩小和自由旋转视图 viewer.scene.screenSpaceCameraController.enableZoom = false; viewer.scene.screenSpaceCameraController.enableTilt = false; 修改视图默认鼠标操作方式 /...
  • vue中鼠标事件

    千次阅读 2020-06-08 08:43:45
    vue中鼠标事件 @click//单击 @mousedown//按下 @mouseup//抬起 @dblclick//双击 @mousemove//移动 @mouseleave//离开 @mouseout //移出 @mouseenter//进入 @mouseover//在
  • vue的鼠标事件

    千次阅读 2020-07-10 14:56:51
    1. mouseenter :进入 2. mouseover:在 3. mousemove:移动 4. mouseout:移出 5. mouseleave:离开 6. click:单击 7. mousedown:按下鼠标 8. mouseup:松开鼠标 9. dblclick:双击
  • Qt 鼠标事件,键盘事件

    千次阅读 2016-11-23 20:33:17
    Qt鼠标事件 Qt键盘事件 Qt事件处理
  • Cesium 鼠标事件监听

    万次阅读 2019-01-25 10:20:20
    在Cesium里面,我们可以通过Cesium.ScreenSpaceEventHandler的实例化对象的setInputAction方法绑定鼠标事件: var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); //todo:在椭球下点击创建点 ...
  • 本文主要总结用Qt5.9实现常用鼠标事件,包括进入QWidget界面事件、离开QWidget界面事件、摁住鼠标事件。实现上面三个事件,只需要改写虚函数enterEvent(QEvent *),leaveEvent(QEvent *),mouseMoveEvent...
  • js DOM : 鼠标事件

    千次阅读 2019-07-28 11:21:29
    鼠标进入事件:onmouseover 、onmouseenter 鼠标移出事件 :onmouseout 、onmouseleave 鼠标移动事件 :onmousemove 事件绑定 var layer = document.getElementById('layer'); // 鼠标坐标是相对于layer元素的 ...
  • 为了在QT UI界面的状态栏实时显示鼠标在Label中的位置,需要重写鼠标事件MouseMoveEvent()。 但是MouseMoveEvent为了不过多消耗资源,默认需要鼠标按下捕捉到。因此需要在构造函数中设置setMouseTracking(true),...
  • 本文主要总结在Qt5.9中的鼠标事件,该事件包括鼠标进入控件事件、鼠标离开控件事件、控件内摁下鼠标事件、控件内释放鼠标事件。 实现鼠标进入、离开、摁下、释放控件的事件,只需要改写事件过滤虚函数eventFilter()...
  • Cypress 一些鼠标事件

    千次阅读 2020-06-03 19:20:50
    一、鼠标悬停事件(mouseover) cy.get('button').trigger('mouseover') 这是官方给出的api,实时没有生效。尝试了各种方法,直到看到这个贴子 [https://github.com/cypress-io/cypress/issues/10]...
  • Pygame鼠标事件检测

    千次阅读 2020-07-11 15:24:08
    按下一个键,点一下鼠标,都是事件,一个游戏中需要很多事件,比如点击一下屏幕,就是一个事件鼠标的滑动,也是事件,于是我们需要在死循环中侦测事件的发生去处理。 首先先不处理,先说说怎么检测事件,游戏最小...
  • QT 事件系统之QMouseEvent鼠标事件

    千次阅读 2019-07-11 00:18:20
    在Qt中,鼠标事件被封装成.QMouseEvent对象,QMouseEvent中包含一些参数,用描述鼠标事件。 在QT中,鼠标事件包含:鼠标按键按下,鼠标按键释放,鼠标双击事件,鼠标移动事件。 分别由下面的event handler来处理:...
  • Python(三)鼠标事件

    千次阅读 2020-09-11 19:21:46
    一、鼠标事件 ActionChains类包含了鼠标操作。 ActionChains类中鼠标操作的常用方法: context_click()------------------右击 double_click()-------------------双击 drag_and_drop()---------------拖动 move_to_...
  • html5中的鼠标事件

    万次阅读 2019-04-10 10:09:22
    1.html5的鼠标事件,常见的鼠标事件有: onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 ondrag 当拖动元素时运行脚本 ondragend 当拖动操作结束时运行脚本 ondragenter 当元素被拖动至有效的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 330,189
精华内容 132,075
关键字:

鼠标事件