首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

「Web编程API」- 03

DOM事件流 html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。 当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。...那么是先执行父元素的单击事件,还是先执行div的单击事件 ???...比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。 当时的2大浏览器霸主谁也不服谁!...; 1.3.6 阻止默认行为 html中一些标签有默认行为,例如a标签被单击后,默认会进行页面跳转。...常用鼠标事件 1.4.1 案例:禁止选中文字和禁止右键菜单 我是一段不愿意分享的文字 // 1. contextmenu 我们可以禁用右键菜单

1.4K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    可视化场景内任意绘制多边形并测量面积

    面积的测量是根据鼠标绘制的范围,通过地理坐标系的转换而计算出实际面积大小,距离的测量是根据鼠标在地图上绘制的点,实时计算出两点之间的实际距离。如何在3D场景中测量面积?...先来看一下实现效果: 微信截图_20210813100919.png 实现思路 1、首先是添加注册事件,单击鼠标左键添加点位,鼠标移动持续绘制测量线段,双击或单击鼠标右键结束。...: 'div' + _this.opts.modelNum + _this.numIndex, // 起点顶牌div标签id coor: _this.opts.currPosition, // 起点坐标...通过节点和线段来创建参数组,统一所有鼠标点击后的坐标点集合,生成不规则图形的测量面积。...this.coordinatesArr = [this.opts.currPosition]; // 存储鼠标点击后坐标点的集合 this.ePosition = null; // 存储触发事件后鼠标的位置

    69730

    原生 JS DOM 常用操作大全

    禁止鼠标右键菜单selectstart 禁止鼠标选中文字 只有在同一个元素上相继触发 mouseover 和 mouseup事件 才会触发 click 事件 只有触发再两次 click 事件,才会触发一次...son点击事件 禁止鼠标右键菜单 //1.contextmenu 禁止鼠标右键菜单 documnet.addEventListener(“contextmenu”,function(e){ e.preventDefault...e.target 指向的是事件触发元素 别忘了e.通常情况下e.target 和 this 的指向是一致的 注意:有一种情况不同,那就是在事件冒泡时(父子元素有相同事件,单击子元素,父元素的事件处理函数也会被触发执行...)这时候 this 指向的是元素,因为 this 使终指向的是事件绑定的元素 target 指向的是子元素 ,因为target使终指向的是事件触发的元素 123 abc abc abc 鼠标的事件对象...在标签中设置div data-index="1"> div>使用 js设置 Element.setAttribute("data-index",2) 节点操作 node 表示父级 child 表示子级

    10810

    JS快速入门(二)

    事件基础 事件定义 事件三要素 事件绑定 三种绑定方式 事件属性赋值和事件监听区别 鼠标及键盘事件 常用鼠标事件 常用键盘事件 常用键盘事件属性 窗口事件 常用窗口事件 JS快速入门(二) 下面介绍...BOM 由一系列的相关对象组成,window 作为 BOM 的顶层对象,所有其他全局对象都是 window 的子对象,甚至 DOM 也是其子对象之一; window 对象作为 BOM 的顶级对象,本身包含一些全局属性和方法...()根据运行时机,会写入文档不同的位置 ---- 事件基础 事件定义 用户与浏览器交互的方法,规定了浏览器在什么时刻执行什么事情 事件举例:鼠标单击,双击,键盘输入,页面或图像载入 事件三要素 事件源:...IE9 浏览器 鼠标及键盘事件 常用鼠标事件 方法 说明 click 单击鼠标左键触发。...,加载窗口,关闭窗口,窗口滚动等,掌握如何处理窗口事件可以帮助我们实现更加丰富的交互效果; 常用窗口事件 方法 说明 load 当整个页面及所有依赖资源(如样式表和图片)都已完成加载时,将触发load事件

    6.6K30

    回到基础:理解 JavaScript DOM

    它使 Javascript 能够访问和操作页面的元素和样式。该模型构建在基于对象的树结构中,并定义: HTML 元素作为对象 HTML 元素的属性和事件 访问HTML元素的方法 ?...这意味着如果你想访问网页上的任何对象,必须从这里开始。它还包含许多重要的属性和方法,使我们能够访问和修改自己的页面。...下面列出了一些比较重要的事件: 鼠标点击 页面加载 鼠标移动 输入字段更改 分配事件 可以用标记上的属性直接在 HTML 代码中定义事件。... 在此例中,单击按钮时, 的文本将被改为 “Hello!”。 还可以在触发事件时调用函数,如下一个例子所示。... 这里我们在单击按钮时调用 changeText() 方法,并将该元素作为属性传递。 还可以用 Javascript 代码为多个元素分配相同的事件。

    2.5K30

    Python 图形化界面基础篇:处理鼠标事件

    在本文中,我们将深入研究如何使用 Python 的 Tkinter 库来处理鼠标事件,并演示如何在应用程序中实现一些常见的鼠标交互功能。...它提供了一组工具和组件,用于构建窗口、按钮、标签、文本框等 GUI 元素,并且支持事件处理机制,可以监听和响应用户的交互操作。...Tkinter 提供了几种常见的鼠标事件,如 (左键单击)、 (中键单击)、 (右键单击)等。...root.mainloop() 完整示例代码 下面是一个完整的示例代码,展示了如何创建一个 Tkinter 窗口、 Canvas 画布以及如何处理鼠标左键单击事件: import tkinter as...最后,启动了 Tkinter 的主事件循环,使窗口变得可交互。 结论 在本文中,我们学习了如何使用 Python 的 Tkinter 库来处理鼠标事件。

    93830

    手把手教你用 Python 实现浪漫表白程序

    ,最终生成的照片墙如下: 启动宠物程序 启动宠物程序基本流程为:首先建立表白语料库作为聊天窗口展示;然后自行选择一些具有表白意义的 gif 动态图作为宠物动作;最后通过 Pyqt5 构建透明窗口程序,...其中具体知识点分为以下几个部分: 1、Pyqt5 基本流程 1.1 类的定义和初始化 为了使程序更加规范,我们定义整体的类变量,方便调用。...2.1 鼠标点击事件 鼠标点击 icon 传递的信号会带有一个整形的值,1是表示单击右键,2是双击,3是单击左键。...2.6 鼠标右键事件 鼠标移出定义函数contextMenuEvent,在右键菜单里通过cmenu.addAction加入标签。...action = cmenu.exec_(self.mapToGlobal(e.pos())) 获取鼠标点击标签,用来判断用户点击了哪一个标签。

    1.8K30

    JavaScript入门

    命令' 鼠标滑过或者点击这些都是事件,用户操作,需要扑捉用户操作就是事件 在标签里面写 行内式基本不用: 1.冗余代码多, 2.行内式有局限性、有些命令没法写 6***JavaScript查找标签 注意范围...div id="box">divdiv> 8.2 控制标签属性 标签的属性 k='v' 标签的css属性 k:v; 如果控制class属性js写法为...***事件 事件语法 + 常用的事件属性:单击、鼠标滑过、鼠标离开 单击onclick 鼠标滑过onmouseover 鼠标离开onmouseout 目标.事件属性 = 命令 命令:1、函数名...设置按钮绑定单击事件:获取左侧用户输入的数据,显示到右侧; 下拉菜单选中不同的选项,更换不同的风格(css) // 按钮 var oSetcard = document.getElementById...设置按钮绑定单击事件:获取左侧用户输入的数据,显示到右侧; 下拉菜单选中不同的选项,更换不同的风格(css) // 按钮 var oSetcard = document.getElementById

    3.3K20

    5分钟轻松学Python:4行代码写一个爬虫

    爬虫工程师是个很重要的岗位。爬虫每天爬取数以亿计的网页,供搜索引擎使用。爬虫工程师们当然不是通过单击鼠标右键并另存的方式来爬取网页的,而会用爬虫“伪装”成真实用户,去请求各个网站,爬取网页信息。...屏幕上打印的源代码和在 Chrome 浏览器中单击鼠标右键,然后在弹出的快捷菜单中单击“查看网页源代码”是一样的。  在此可以看到,网页的源代码是由很多标签组成的。...静态页面是指,网站的源代码里包含所有可见的内容,也就是所见即所得。常用的做法是,在浏览器中单击鼠标右键,然后在弹出的快捷菜单中选择“显示网页源代码”,推荐使用 Chrome 浏览器。 ...爬虫当然也可以爬取图片,就像在用浏览器访问网站时,可以在图片上单击鼠标右键,然后在弹出的快捷菜单中选择“另存为”选项去下载图片一样。 利用 requests 库也可以抓取图片。...还是以爬取“http://www.yuqiaochuang.com”为例,这次爬取网站左上角的图片。在左上角的图片上面单击鼠标右键,接着在弹出的快捷菜单中选择“检查”。

    1K20

    DOM和事件和BOM的学习

    *例如:我方水晶被吹毁我就骂队友, 敌方水晶被吹毁我就夸奖自己 *如何绑定事件 1.直接在html标签上,指定事件的属性,属性值就是js...//2.绑定单击事件 light.onclick=function () { if (flag){//判断灯是开的,则灭掉 light.src="...*事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了。 *事件源:组。如:按钮 文本输入框。。。 *监听器:代码。 *注册监听:将事件,事件源,监听器结合在一起。...*常见的事件: 1.点击事件: 1.onclick:单击事件 2.onblclick:双击事件 2.焦点事件 1.onblur:失去焦点...4.鼠标事件 onmousedown 鼠标按钮被按下 onmouseout 鼠标从某元素移开 onmouseover 鼠标移到某元素之上

    1.6K30

    Firebug 折腾记_(2)HTML&CSS 定位及调试小技巧

    ; 定位HTML元素的三种方式 进入调试工具界面,按下”瓢虫”旁边的小鼠标,再进行网页元素的选择 默认快捷键,Ctrl + shift + C 鼠标移动到网页的某一块元素,鼠标右键,使用Firebug查看元素...HTML及CSS简单调试 ##HTML元素编辑 除了写死的代码结构不能操作外(比如DIV块标签),内部的各种属性和内容都支持实时修改和预览的; 修改其中内容,只要单击你选中的东东即可,会有一个小小的蓝色框框出来...比如: 类(class) 行内样式(style) 目标(target) 链接(href) 文本内容 增加额外属性,在包含块的第一个标签的括号内单击即可添加自己想要增加的 HTML DOM选定 可以轻而易举的选定各种包裹层和父类...,单击即可 CSS元素编辑(实时预览) 支持禁用某个属性,点击属性旁边的红色圈圈,被禁用属性会变成灰色 修改某个属性 增加某个属性 CSS像素微调技巧 CSDN不支持GIF动态图...,很实用 样式下拉菜单 – 实时查看链接的效果 这里面更改颜色显式的模式,及链接的效果实时查看,比如你选定一个a链接区域, CSS有设置了hover,focus这些事件,勾选了即可看到添加样式的效果而不需要移动触发

    10610

    Excel图表学习72:制作里程碑图

    如下图1所示的工作表,记录着一个重大工程项目的主要时间节点。 ? 图1 为了使数据一目了然,我们想要创建以时间轴为基准的里程碑图。...图8 7.单击“添加”按钮,在“编辑数据系列”中,使用“位置”列作为系列值,如下图9所示。 ? 图9 8.单击选择“任务”系列,单击右键,从快捷菜单中选择“更改系列图表类型”,如下图10所示。 ?...图11 10.在任一柱形上单击鼠标右键,选择“设置数据系列格式”,在“系列选项”中,选择系列绘制在次坐标轴,如下图12所示。 ? 图12 11.删除右侧的次坐标轴,结果如下图13所示。 ?...图14 13.单击选择柱形系列,单击鼠标右键,从快捷菜单中选择“添加数据标签”,如下图15所示。 ?...图21 19.选择水平轴,单击鼠标右键,从快捷菜单中选择“设置坐标轴格式”,如下图22所示。 ? 图22 在“设置坐标轴格式”中,选择标签位置为“低”,如下图23所示。 ?

    5K20

    Web 自动化实战经验硬核总结

    例如:#ab p 含义:匹配id为ab的下一/多级p标签 实例: "f-workingset-selector > div:nth-child(2) p-treenode:nth-child(2) div...[title='我的文件']" nth-child(2)表示取div的第二个 子元素选择器(>),表示只能选择下一级的元素 例如:#ab>p 含义:匹配id为ab的下一级中的p标签 实例(f-data-copy-detail...2.1 鼠标事件 名称 含义 click(on_element=None) 单击鼠标左键 click_and_hold(on_element=None) 点击鼠标左键,不松开 context_click...(on_element=None) 点击鼠标右键 double_click(on_element=None) 双击鼠标左键 drag_and_drop(source, target) 拖拽到某个元素然后松开...send_keys(Keys.CONTROL,‘x’) #剪切(Ctrl+X) send_keys(Keys.CONTROL,‘v’) #粘贴(Ctrl+V) 2.3 ActionChains模拟鼠标操作事件

    94920

    Cypress系列(18)- 可操作类型的命令

    :单击 dbclick:双击 rightclick:右键 .click() 的语法和用法 单击某个元素 六种基础语法格式 // 单击某个元素 .click() // 带参数的单击 .click(options...,x 是横轴,y 是竖轴 options 可选参数 共有四个 如何传 options ?...Test Runner 的快照找到阻止 DOM 元素交互的情况,但某些情况下可能会阻碍测试的进行 比如:有一个嵌套的导航结构,用户必须将鼠标 hover 在一个非常特定的模式中,才能拿到所需的链接 当测试时...() 会触发的鼠标事件 在命令日志中单击 click 时,控制台console 将输出以下鼠标事件 接下来我们讲 type() 命令 前端 html 代码 后面栗子主要以这个页面为主哦 .type...html 代码 下面举的栗子以这个 html 页面的元素为基础哦 标签的栗子 测试文件代码 测试结果 标签的栗子 测试文件代码 测试结果 type =

    1.4K30
    领券