精华内容
下载资源
问答
  • web鼠标的点击事件

    千次阅读 2017-05-28 18:37:14
    商品展示 body,img{ margin:0px; padding: 0px; } body{ margin: 100px auto 0px auto; background-image: url("./images/01big.jpg");
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>商品展示</title>
    
        <style>
            body,img{
                margin:0px;
                padding: 0px;
            }
            body{
                margin: 100px auto 0px auto;
                background-image: url("./images/01big.jpg");
                background-repeat: no-repeat;
                background-position: center;
            }
            .box{
                width:366px;
                height:70px;
                margin: 435px auto 0px auto;
                cursor: pointer;
            }
            .box img{
                width: 70px;
            }
        </style>
        <script>
            function $(id){
                return document.getElementById(id);
            }
    
            window.onload = function(){
                $('img1').onmousemove = function(){
                    document.body.style.backgroundImage = "url('./images/01big.jpg')";
                }
                $('img2').onmousemove = function(){
                    document.body.style.backgroundImage = "url('./images/02big.jpg')";
                }
                $('img3').onmousemove = function() {
                    document.body.style.backgroundImage = "url('./images/03big.jpg')";
                }
                $('img4').onmousemove = function(){
                    document.body.style.backgroundImage = "url('./images/04big.jpg')";
                }
                $('img5').onmousemove = function(){
                    document.body.style.backgroundImage = "url('./images/05big.jpg')";
                }
            }
        </script>
    </head>
    <body>
        <div id="bigbox"></div>
        <div class="box">
            <img src="./images/01.jpg" alt="" id="img1">
            <img src="./images/02.jpg" alt="" id="img2">
            <img src="./images/03.jpg" alt="" id="img3">
            <img src="./images/04.jpg" alt="" id="img4">
            <img src="./images/05.jpg" alt="" id="img5">
    
        </div>
    </body>
    </html>

    展开全文
  • 鼠标操作是通过使用低级界面执行,该界面允许我们向Web浏览器提供虚拟化设备输入操作。 – 鼠标动作操作方法详细介绍如下: click_and_hold 移动到该元素,然后在给定元素中间单击(不释放) import time ...


    鼠标表示鼠标事件。 鼠标操作是通过使用低级界面执行的,该界面允许我们向Web浏览器提供虚拟化的设备输入操作。

    鼠标动作操作方法详细介绍如下:

    click_and_hold

    移动到该元素,然后在给定元素的中间单击(不释放)

    
    import time
    from selenium import webdriver
    from selenium.webdriver.common.action_chains import ActionChains
    
    
    with webdriver.Chrome() as driver:
        driver.get('https://www.baidu.com/')
        time.sleep(2)
        setting = driver.find_element_by_xpath('//*[@id="s-usersetting-top" and text()="设置"]')
        ActionChains(driver).click_and_hold(setting).perform()
        time.sleep(5)
        
    

    context_click

    首先将鼠标移动到元素的位置,然后在给定元素上执行上下文单击(右键单击)

    
    import time
    from selenium import webdriver
    from selenium.webdriver.common.action_chains import ActionChains
    
    
    with webdriver.Chrome() as driver:
        driver.get('https://www.runoob.com/python/python-tutorial.html')
        time.sleep(2)
        setting = driver.find_element_by_xpath('//*[@rel="noopener noreferrer" and text()="Python 3.X 版本的教程"]')
        ActionChains(driver).context_click(setting).perform()
        time.sleep(5)
    
    

    double_click

    移动到该元素,并在给定元素的中间双击

    
    import time
    from selenium import webdriver
    from selenium.webdriver.common.action_chains import ActionChains
    
    
    with webdriver.Chrome() as driver:
        driver.get('https://www.runoob.com/python/python-tutorial.html')
        time.sleep(2)
        setting = driver.find_element_by_xpath('//*[@rel="noopener noreferrer" and text()="Python 3.X 版本的教程"]')
        ActionChains(driver).double_click(setting).perform()
        time.sleep(5)
    
    

    move_to_element

    将鼠标移到元素的中间。 执行此操作时,该元素也会滚动到视图中,再进行定位操作

    
    import time
    from selenium import webdriver
    from selenium.webdriver.common.action_chains import ActionChains
    
    
    with webdriver.Chrome() as driver:
        driver.get('https://www.baidu.com/')
        setting = driver.find_element_by_xpath('//*[@id="s-usersetting-top" and @name="tj_settingicon"]')
        ActionChains(driver).move_to_element(setting).perform()
        driver.find_element_by_xpath('//*[text()="搜索设置"]').click()
        time.sleep(5)
        
    

    move_by_offset

    将鼠标从其当前位置(或0,0)移动给定的偏移量。 如果坐标在视图窗口之外,则鼠标将最终在浏览器窗口之外

    
    import time
    from selenium import webdriver
    from selenium.webdriver.common.action_chains import ActionChains
    
    
    with webdriver.Chrome() as driver:
        driver.get('https://www.baidu.com/')
        setting = driver.find_element_by_xpath('//*[@id="s-usersetting-top" and @name="tj_settingicon"]')
        ActionChains(driver).move_to_element(setting).perform()
        time.sleep(5)
        xOffset = 1
        yOffset = 1
        webdriver.ActionChains(driver).move_by_offset(xOffset, yOffset).perform()
        driver.find_element_by_xpath('//*[text()="搜索设置"]').click()
        time.sleep(5)
        
    

    如我们把xOffset和yOffset的值稍微设置大一点,设置值为 100,就会报不在范围的错误:Message: move target out of bounds

    
    /Users/lifeng/python-virtualenv/venv/bin/python3 /Users/lifeng/python-projects/test-python/selenium_script.py
    Traceback (most recent call last):
      File "/Users/lifeng/python-virtualenv/venv/lib/python3.9/site-packages/selenium/webdriver/remote/errorhandler.py", line 242, in check_response
        raise exception_class(message, screen, stacktrace)
    selenium.common.exceptions.MoveTargetOutOfBoundsException: Message: move target out of bounds
      (Session info: chrome=89.0.4389.82)
      
    

    drag_and_drop

    首先在源元素上单击并按住,然后移动到目标元素的位置,然后释放鼠标

    
    import time
    from selenium import webdriver
    from selenium.webdriver.common.action_chains import ActionChains
    
    
    with webdriver.Chrome() as driver:
        driver.get('https://www.baidu.com/')
        setting = driver.find_element_by_xpath('//*[@id="s-usersetting-top" and @name="tj_settingicon"]')
        setting_one = driver.find_element_by_xpath('//*[@id="s-usersetting-top" and @name="tj_settingicon"]')
        ActionChains(driver).drag_and_drop(setting, setting_one).perform()
        driver.find_element_by_xpath('//*[text()="搜索设置"]').click()
        time.sleep(5)
        
    

    drag_and_drop中要传两个参数,传入第一个是源元素setting后按住,再点击传入的目标元素setting_one后,然后再释放掉setting_one

    drag_and_drop_by_offset

    首先在源元素上单击并按住,移至给定的偏移量,然后释放鼠标。可针对验证码滑动解锁操作

    
    import time
    from selenium import webdriver
    from selenium.webdriver.common.action_chains import ActionChains
    from selenium.common.exceptions import UnexpectedAlertPresentException
    
    
    with webdriver.Chrome() as driver:
        driver.get('https://mail.qq.com/')
        time.sleep(2)
        form_ = driver.find_element_by_xpath('//*[@id="login_frame"]')
        driver.switch_to.frame(form_)
        driver.find_element_by_xpath('//*[@id="u"]').click()
        driver.find_element_by_xpath('//*[@id="u"]').send_keys('16688888888')
        driver.find_element_by_xpath('//*[@id="p"]').click()
        driver.find_element_by_xpath('//*[@id="p"]').send_keys('12345678999')
        driver.find_element_by_xpath('//*[@id="login_button"]').click()
        time.sleep(2)
        code_iframe = driver.find_element_by_xpath('//*[@id="tcaptcha_iframe"]')
        driver.switch_to.frame(code_iframe)
        code_offset = driver.find_element_by_xpath('//*[@id="tcaptcha_drag_button"]')
        ActionChains(driver).drag_and_drop_by_offset(code_offset, 179, 0).perform()
        time.sleep(10)
    
    

    在这里插入图片描述

    官方文档中的介绍是可以这样操作:

    
    from selenium import webdriver
    
    
    driver = webdriver.Chrome()
    driver.get("https://crossbrowsertesting.github.io/drag-and-drop")
    sourceEle = driver.find_element(By.ID, "draggable")
    targetEle  = driver.find_element(By.ID, "droppable")
    targetEleXOffset = targetEle.location.get("x")
    targetEleYOffset = targetEle.location.get("y")
    
    webdriver.ActionChains(driver).drag_and_drop_by_offset(sourceEle, targetEleXOffset, targetEleYOffset).perform()
      
    

    但是实操使用了location.get()的方法,运行后报错了:

    
    /Users/lifeng/python-virtualenv/venv/bin/python3 /Users/lifeng/python-projects/test-python/selenium_script.py
    Traceback (most recent call last):
      File "/Users/lifeng/python-projects/test-python/selenium_script.py", line 29, in <module>
        xOffset = code_offset.location(170)
    TypeError: 'dict' object is not callable
    
    Process finished with exit code 1
    
    

    release

    将释放按下的鼠标左键

    
    import time
    from selenium import webdriver
    from selenium.webdriver.common.action_chains import ActionChains
    
    
    with webdriver.Chrome() as driver:
        driver.get('https://www.runoob.com/python/python-tutorial.html')
        text_python = driver.find_element_by_xpath('//*[@rel="noopener noreferrer" and text()="Python 3.X 版本的教程"]')
        target_python = driver.find_element_by_xpath('//*[@rel="noopener noreferrer" and text()="Python 3.X 版本的教程"]')
        webdriver.ActionChains(driver).click_and_hold(text_python).move_to_element(target_python).perform()
        webdriver.ActionChains(driver).release().perform()
        time.sleep(1)
        
    

    以上总结或许能帮助到你,或许帮助不到你,但还是希望能帮助到你,如有疑问、歧义,评论区留言会及时修正发布,谢谢


    未完,待续…
    一直都在努力,希望您也是!

    在这里插入图片描述

    展开全文
  • three 响应鼠标点击事件 提示: 我现在这边是用vue2.0项目来使用three 1.事前了解 要先知道3种坐标 屏幕坐标: 我们在web端打开时候是屏幕坐标 场景坐标: three场景内物体所在场景内坐标 视点坐标: 以...

    three 响应鼠标点击事件

    提示: 我现在这边是用的vue2.0的项目来使用的three

    1.事前了解

    要先知道3种坐标
    屏幕坐标: 我们在web端打开的时候是屏幕坐标
    场景坐标: three的场景内的物体所在场景内的坐标
    视点坐标: 以相机为原点。只有进入到相机内的物体才进行计算.才具有的坐标
    视觉转换坐标

    图片偷自 https://segmentfault.com/a/1190000010490845

    2.方法选取

    官方已经提示了做法了,射线探测法

    • 先把屏幕上点击的坐标转换为场景内的坐标。
    • 然后采用射线
    • 从相机原点到点击的点展开一条射线
    • 得到放回的全部物体属性。
    • 这些物体就是你点击所能取到的全部物体了
    • 返回的是一组物体对象 剩下的就可以自己判定了

    3.编写代码

    我们先编写一个函数做以下操作

    • 转换屏幕坐标
    • 建立射线
    • 取回与射线交叉的物体
    //获得交叉对象
        getIntersects(x, y) {
          //建立射线
          let raycaster = new THREE.Raycaster();
          //建立一个空物体
          let mouseVector = new THREE.Vector3();
          //从鼠标点击的坐标转化为3D平面坐标
          //document.getElementById("webgldiv")是我的设置的three需要展开的地方
          //clientWidth clientHeight是我元素的长度和宽度
          //换算成点击的3D平面坐标  过程自行研究了
          let localx =
            (x / document.getElementById("webgldiv").clientWidth) * 2 - 1;
          let localy =
            -(y / document.getElementById("webgldiv").clientHeight) * 2 + 1;
          //设置空物体的位置
          mouseVector.set(localx, localy, 0.5);
          //射线位置从相机对象到空物体对象
          raycaster.setFromCamera(mouseVector, this.camera);
          //放回和射线相交的物体
          return raycaster.intersectObject(this.group, true);
        },
    

    这就是取回射线交叉对象的函数 。
    入参是点击的位置(相对点击元素的位置),然后新建一个射线对象 还有一个空物体坐标,经过坐标转换后得到平面坐标.把空物体设置到空间坐标去 Z方向为0.5,然后设置射线从相机对象发射到空物体坐标,通过intersectObject方法得到全部的交叉物体.

    然后我们再编写点击事件的函数

    window.addEventListener(
          "click",
          (event) => {
            //保持原事件
            event.preventDefault();
            let selectedObject = null;
            //获得射线得到的线路上的全部物体
            //layerX layerY  元素设置了定位后是点击相对于元素的定位
            var intersects = this.getIntersects(event.layerX, event.layerY);
            //分类
            if (intersects.length > 0) {
              //得到全部物体  只选择线上的第一个
              var res = intersects.filter(function(res) {
                //过滤掉东西
                return res && res.object;
              })[0];
              if (res && res.object) {
                //给物体染色
                selectedObject = res.object;
                selectedObject.material.color.set("#f00");
              }
            }
          },
          false
        );
    

    这就是添加的点击事件,传入点击时获取的坐标,同时新建selectedObject变量,再调用前面写的getIntersects方法得到全部的交叉对象.为了提升颜色效果,我们设置了一下颜色

    4.效果展示

    点击前
    在这里插入图片描述
    点击后
    在这里插入图片描述

    展开全文
  • 基于python异步io框架Tornado,结合JavaScriptonkeydown事件、 jQuerymousedown、mouseup、touchstart、touchend事件以及Ajax,实现了监控遥控命令与web网页指定按键和鼠标(屏幕)点击事件的绑定,同时也实现了...
  • QTP录制鼠标右键单击事件要通过模拟键盘操作来实现 Step 1,修改ReplayType为2,一般情况默认设置是1。...Step 2,鼠标右键单击事件(附:Click的事件有三种 micLeftBtn 0 鼠标左键。 micRightBtn ...

    QTP录制鼠标右键单击事件要通过模拟键盘操作来实现

    Step 1,修改ReplayType为2,一般情况默认设置是1的。(1 – 使用浏览器事件运行鼠标操作。 2 – 使用鼠标运行鼠标操作)
    Setting.WebPackage(”ReplayType”) = 2

    Step 2,鼠标右键单击事件
    (附:Click的事件有三种 micLeftBtn 0 鼠标左键。 micRightBtn 1 鼠标右键。 micMiddleBtn 2 鼠标中键)
    Browser(”支付宝 – 网上支付 安全快速!”).Page(”支付宝 – 网上支付 安全快速!”).Link(”返回我要付款”).Click , , micRightBtn

    Step 3,点击右键弹出的菜单(采用键盘事件来模拟)
    Set wshShell = CreateObject(”WScript.Shell”)
    wshShell.SendKeys “{DOWN}” //键盘向下的箭头
    wshShell.SendKeys “{DOWN}”
    wshShell.SendKeys “{ENTER}” //回车键

    Step 4,修改ReplayType为1(使用浏览器事件运行鼠标操作)
    Setting.WebPackage(”ReplayType”) = 1

    Good to go now.

    转载于:https://www.cnblogs.com/ellie-test/p/3823518.html

    展开全文
  • QTP录制鼠标右键单击事件要通过模拟键盘操作来实现 Step 1,修改ReplayType为2,一般情况默认设置是1。(1 – 使用浏览器事件运行鼠标操作。...(附:Click的事件有三种 micLeftBtn 0 鼠标左键。 micRightB...
  • onclick点击事件,onmouseover鼠标移入事件,onmouseout鼠标离开事件,onmouseenter鼠标进入事件,onmouseleave 鼠标离开事件,onmouseup鼠标按键弹起事件,onmouseove 鼠标移动事件,onmouseup 鼠标按键抬起事件,...
  • 鼠标事件 1.click和dblclick 事件方法一般都有三种使用方式:我们就以click为例来介绍这些方式,接下来方法不再冗余介绍,只是谈论最重要知识点。 第一种方式 点击触发 $(&amp;amp;quot;ele&amp;...
  • web自动化之鼠标悬停事件

    千次阅读 2019-05-31 22:51:02
    前言:我们在操作浏览器时候,都需要...鼠标事件有:  1. 悬浮 - 用最多最多 move_to_element  2. 右键 context_click  3. 点击 click  4. 双击 double_click  5. 拖拽 drag_and_drop  6. 滚动 — js  7...
  • 用selenium做自动化,有时候会遇到需要模拟鼠标操作才能进行情况,比如单击、双击、点击鼠标右键、拖拽等等。而selenium给我们提供了一个类来处理这类事件 ———ActionChains ActionChains类提供了鼠标操作常用...
  • Mouselog:paw_prints:Mouselog是一个基于Web的平台,网站所有者可以使用它记录,可视化和分析用户行为,例如鼠标跟踪数据。 实时演示https://mouselog.org/架构Mouselog conta Mouselog:paw_prints:Mouselog是一个...
  • 该方法将通知 Web 浏览器不要执行与事件关联默认动作(如果存在这样动作)。例如,如果 type 属性是 “submit”,在事件传播任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 ...
  • 该方法将通知 Web 浏览器不要执行与事件关联默认动作(如果存在这样动作)。例如,如果 type 属性是 “submit”,在事件传播任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 E...
  • web事件

    2016-04-20 10:57:18
    鼠标点击时触发此事件 ondblclick IE4、N4 鼠标双击时触发此事件 onmousedown IE4、N4 按下鼠标时触发此事件 onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3、N2 当鼠标移动到某对象范围...
  • a)鼠标事件 鼠标事件也许是web页面当中最常用到的事件,因为鼠标是最常用导航设备,在DOM3级事件上定义了9个鼠标事件,分别为: click:当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。 dbclick:当用户...
  • 2、把点击事件直接绑定到需要点击标签上,而不是其祖先级,尽量不要用事件委托 曾在两个项目中适配IOS手机端Safari浏览器时遇到此问题,一个用第一种方法解决,另一个用方法一无效后搭配方法二解决。 ...
  • 事件概述 所谓事件就是可以被 JavaScript 侦测到行为; 网页中每个元素都可以产生某些可以触发 ...事件的触发方式(例如:鼠标点击,键盘抬起,鼠标移动等) 事件处理程序(函数) 事件触发后要执行代...
  • 又是一个自己踩过很多坑,然后来分享经验 web自动化,有很多需要鼠标移上去,然后点击上出现div内容 我百度过太多文章,事件过很多理论,结果都是以失败高宗
  • // 屏蔽点击$('body').css('pointer-events', 'none');...用处:可以在弹出层时候或者fixed定位时,设置下面元素的鼠标事件var pop = function(msg, delay, cb) { var _msg = msg || '网络不给力,请稍后再...
  •  鼠标事件也许是web页面当中最常用到的事件,因为鼠标是最常用导航设备,在DOM3级事件上定义了9个鼠标事件,分别为:  click:当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。  dbclick:当用户双击...
  • click 点击事件(PC:点击N次就触发N次事件) 单击事件(移动端:300ms内没有发生第二次点击操作,算作单击事件行为,所以click在移动端有300ms延迟) dblclick 双击事件 contextmenu 鼠标右键点
  • web的事件 事件并不是JavaScript核心部分,他们是在浏览器的Web Api中定义。下面列举几种情况,都属于发生了事件。 用户在某个元素上点击鼠标或悬停光标。 用户在键盘中按下某个按键。 用户调整浏览器大小...
  • selenium鼠标键盘事件

    2019-05-13 11:31:18
    从之前的几篇文章对selenium描述的示例中,对元素定位及其简单操作click和set_keys进行了举例,这两个操作也...对应的selenium除了可以使用 click( ) 来模拟鼠标的单击操作,现在Web产品中还提供了更丰富的鼠标交互...
  • 上一节我们讲述了在地图上加载图标,这一节我么来讲述监听图标的点击事件 //我们监听map的点击事件。map是之前章节我们加载map的容器 map.on('click', function(e) { clickship(e); }); // 点击响应函数 ...
  • ** 事件:什么是事件? ** 事件是发生并得到处理操作,既:事件来了,然后处理。...JavaScript事件是由访问Web页面用户引起一系列操作,例如:用户点击。当用户执行某些操作时,再去执行一系列代码。 JavaScr...
  • web移动端触屏事件

    2020-03-01 09:02:16
    移动端为了响应双击事件,onclick事件有300ms延迟,因为要看看接下来300ms有没有再次点击,有话视为双击,没有话视为单击。 下面代码可以验证当前手机上onclick事件的延迟(在没有设置viewport时候运行...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 599
精华内容 239
关键字:

web鼠标的点击事件