当前位置： 首页 > article >正文

前端学习-页面尺寸事件以及阻止默认行为(三十三)

article 2026/4/29 20:40:23

目录

前言

页面尺寸事件

语法

检测屏幕宽度

获取宽高

元素尺寸的位置

总结

示例代码

阻止默认行为

阻止冒泡

语法

阻止冒泡如何做

阻止元素默认行为如何做

总结

前言

晚上好各位

页面尺寸事件

会在窗口尺寸改变的时候触发条件

语法

window.addEventListener('resize',function(){//执行的代码})

检测屏幕宽度

window.addEventListener('resize',function(){let w= document.documentElement.clientwidth；console.1og(w)}）

获取宽高

获取元素的可见部分宽高(不包含边框，margin，滚动条等)clientwidth和clientHeight

元素尺寸的位置

使用场景:前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事

简单说，就是通过js的方式，得到元素在页面中的位置

这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了

获取宽高:获取元素的自身宽高、包含元素自身设置的宽高、padding、border

offsetwidth和offsetHeight获取出来的是数值,方便计算注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0

获取位置:获取元素距离自己定位父级元素的左、上距离 offsetLeft和offsetTop 注意是只读属性

总结

1.offsetWidth和offsetHeight是得到元素什么的宽高?

内容+padding+ border

2.offsetTop和offsetLeft 得到位置以谁为准?

带有定位的父级，如果都没有则以 文档左上角 为准

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<!-- 声明文档类型为 HTML5 -->
​
<head><meta charset="UTF-8"><!-- 设置字符编码为 UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 设置视口，使页面宽度适应设备宽度，并初始缩放比例为 1.0 --><title>页面尺寸事件示例</title><!-- 设置页面标题 --><style>body {font-family: Arial, sans-serif;/* 设置字体为 Arial 或其他无衬线字体 */display: flex;/* 使用 Flexbox 布局 */justify-content: center;/* 水平居中内容 */align-items: center;/* 垂直居中内容 */height: 100vh;/* 设置高度为视口高度的 100% */margin: 0;/* 移除默认的外边距 */background-color: #f0f0f0;/* 设置背景颜色为浅灰色 */}
​#info {text-align: center;/* 文本居中对齐 */background-color: #fff;/* 设置背景颜色为白色 */padding: 20px;/* 设置内边距为 20px */border-radius: 8px;/* 设置圆角为 8px */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);/* 设置阴影效果 */}
​@media (max-width: 600px) {
​/* 当屏幕宽度小于或等于 600px 时应用以下样式 */#info {padding: 15px;/* 设置内边距为 15px */border-radius: 6px;/* 设置圆角为 6px */}}</style>
</head>
​
<body><div id="info"><!-- 包含显示窗口宽度和高度的段落 --><p>当前窗口宽度: <span id="width">0</span>px</p><!-- 显示当前窗口宽度 --><p>当前窗口高度: <span id="height">0</span>px</p><!-- 显示当前窗口高度 --><p>元素宽度 (offsetWidth): <span id="elementWidth">0</span>px</p><!-- 显示元素的 offsetWidth --><p>元素高度 (offsetHeight): <span id="elementHeight">0</span>px</p><!-- 显示元素的 offsetHeight --><p>元素顶部偏移 (offsetTop): <span id="elementTop">0</span>px</p><!-- 显示元素的 offsetTop --><p>元素左侧偏移 (offsetLeft): <span id="elementLeft">0</span>px</p><!-- 显示元素的 offsetLeft --></div><script>function updateSize() {const width = window.innerWidth;// 获取当前窗口的可视区域宽度const height = window.innerHeight;// 获取当前窗口的可视区域高度document.getElementById('width').textContent = width;// 更新显示窗口宽度的 span 元素内容document.getElementById('height').textContent = height;// 更新显示窗口高度的 span 元素内容
​const infoElement = document.getElementById('info');// 获取 id 为 'info' 的元素const elementWidth = infoElement.offsetWidth;// 获取元素的 offsetWidth（内容 + padding + border）const elementHeight = infoElement.offsetHeight;// 获取元素的 offsetHeight（内容 + padding + border）const elementTop = infoElement.offsetTop;// 获取元素相对于其包含块的顶部偏移量const elementLeft = infoElement.offsetLeft;// 获取元素相对于其包含块的左侧偏移量
​document.getElementById('elementWidth').textContent = elementWidth;// 更新显示元素宽度的 span 元素内容document.getElementById('elementHeight').textContent = elementHeight;// 更新显示元素高度的 span 元素内容document.getElementById('elementTop').textContent = elementTop;// 更新显示元素顶部偏移的 span 元素内容document.getElementById('elementLeft').textContent = elementLeft;// 更新显示元素左侧偏移的 span 元素内容}
​// 初始调用一次updateSize();// 在页面加载时立即调用 updateSize 函数以显示初始窗口大小和元素尺寸
​// 监听窗口大小变化window.addEventListener('resize', updateSize);// 添加事件监听器，当窗口大小发生变化时调用 updateSize 函数</script>
</body>
​
</html>

阻止默认行为

阻止冒泡

我们某些情况下需要阻止默认情况的发生，比如阻止链接的跳转，表单域跳转

语法

<form action="http://www.baidu.com"<input type="submit" value="提交"></form>
​
<script>
​
const form = document.querySelector('form')；
​
form.addEventListener('click',function(e){
​
e.preventDefault()
​
})
​

阻止冒泡如何做

事件对象.stopPropagation();

阻止元素默认行为如何做

e.preventDefault();

总结

晚安各位，祝好梦

相关文章：

前端学习-页面尺寸事件以及阻止默认行为(三十三)

目录 前言 页面尺寸事件 语法 检测屏幕宽度 获取宽高 元素尺寸的位置 总结 示例代码 阻止默认行为 阻止冒泡 语法 阻止冒泡如何做 阻止元素默认行为如何做 总结 前言 晚上好各位 页面尺寸事件 会在窗口尺寸改变的时候触发条件 语法 window.addEventListener(…...

编程日记 2025/11/6 20:45:19

Kafka 入门与实战

一、Kafka 基础 1.1 创建topic kafka-topics.bat --bootstrap-server localhost:9092 --topic test --create 1.2 查看消费者偏移量位置 kafka-consumer-groups.bat --bootstrap-server localhost:9092 --describe --group test 1.3 消息的生产与发送 #生产者 kafka-cons…...

编程日记 2026/4/25 2:50:02

5 计算机网络

5 计算机网络 5.1 OSI/RM七层模型 5.2 TCP/IP协议簇 5.2.1:常见协议基础 一、 TCP是可靠的&#xff0c;效率低的&#xff1b; 1.HTTP协议端口默认80&#xff0c;HTTPSSL之后成为HTTPS协议默认端口443。 2.对于0~1023一般是默认的公共端口不需要注册&#xff0c;1024以后的则需…...

编程日记 2026/4/25 12:35:33

【华为OD机考】华为OD笔试真题解析(1)--AI处理器组合

一、题目描述 某公司研发了一款高性能AI处理器&#xff0c;每台物理设备具备8颗AI处理器&#xff0c;编号分别为0、1、2、3、4、5、6、7。 编号0~3的处理器处于同一链路中&#xff0c;编号4~7的处理器处于另外一个链路中&#xff0c;不同链路中的处理器不能通信&#xff0c;如…...

编程日记 2025/11/25 17:21:29

程序员也可以这样赚钱

最近有朋友和我交流了关于程序员副业的想法&#xff0c;我想借这个机会对目前软件开发常用的兼职平台做一个梳理。 以下是程序员接副业的靠谱平台推荐&#xff0c;结合政策合规性、平台口碑及实际操作性整理&#xff0c;覆盖国内外主流选择&#xff1a; 一、国内综合型平台 程序…...

编程日记 2025/11/10 13:17:38

VMware虚拟机安装、创建Ubuntu虚拟机及汉化设置全流程详细教程

一、安装VMware Workstation 下载VMware 访问官网&#xff1a;https://www.vmware.com 选择适合的版本&#xff08;如 Workstation Pro 或 VMware Player&#xff0c;后者免费&#xff09;。完成下载后运行安装程序。 网盘下载&#xff1a; 链接: https://pan.baidu.com/s/1MQ…...

编程日记 2026/4/25 0:49:27

HTTP协议学习大纲

第一阶段&#xff1a;HTTP基础概念 互联网与Web基础 理解Web工作原理&#xff1a;客户端-服务器模型URL与URI的结构及区别端口、协议、域名概念 HTTP协议概览 HTTP的作用与特点&#xff08;无状态、无连接、可扩展&#xff09;HTTP协议版本演进&#xff08;0.9 → 1.0 → 1.1 …...

编程日记 2026/3/1 6:30:48

系统URL整合系列视频四（需求介绍补充）

视频 系统URL整合系列视频四&#xff08;需求补充说明&#xff09; 视频介绍 &#xff08;全国&#xff09;大型分布式系统Web资源URL整合需求&#xff08;补充&#xff09;讲解。当今社会各行各业对软件系统的web资源访问权限控制越来越严格&#xff0c;控制粒度也越来越细。…...

编程日记 2025/7/12 4:44:40

21.2.7 综合示例

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 【例 21.7】【项目&#xff1a;code21-007】填充职员表并打印。 本例使用到的Excel文件为&#xff1a;职员信息登记表.xlsx&#x…...

编程日记 2026/4/25 7:44:35

【大模型】DeepSeek与chatGPT的区别以及自身的优势

目录 一、前言二、核心技术对比2.1 模型架构设计2.1.1 ChatGPT的Transformer架构2.1.2 DeepSeek的混合架构 2.2 训练数据体系2.2.1 ChatGPT的数据特征2.2.2 DeepSeek的数据策略 三、应用场景对比3.1 通用场景表现3.1.1 ChatGPT的强项领域3.2.2 DeepSeek的专项突破 3.3 响应效率…...

编程日记 2026/4/26 17:54:29

burpsuite抓取html登陆和上传数据包

一、burpsuite抓取html登陆数据包 1、先写一个html格式的登陆页面 <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><title>这是标签</title></head> <body> <hr><!-- 登陆表单 …...

编程日记 2026/4/24 23:46:48

python 使用OpenAI Whisper进行显卡推理语音翻译

目录 一、Whisper简介 二、模型资料 三、实操案例 3.1 默认使用CPU进行推理 3.2 使用GPU进行推理 四、性能分析 一、Whisper简介 Whisper由 OpenAI 开发的这款强大模型，能轻松将语音转化为文字，并且支持多种语言（如英语、中文、西班牙语等），让全球沟通无障碍。 不仅…...

编程日记 2026/4/14 9:44:13

余数相同问题（信息学奥赛一本通-1080）

【题目描述】 已知三个正整数a&#xff0c;b&#xff0c;c。现有一个大于1的整数x&#xff0c;将其作为除数分别除a&#xff0c;b&#xff0c;c&#xff0c;得到的余数相同。请问满足上述条件的x的最小值是多少&#xff1f;数据保证x有解。 【输入】 一行&#xff0c;三个不大于…...

编程日记 2025/12/23 22:46:37

用 Python 给 Excel 表格截图（20250207）

我搜索了网络上的方案&#xff0c;感觉把 Excel 表格转换为 HTML 再用 platwright 截图是比较顺畅的路径&#xff0c;因为有顺畅的工具链。如果使用的是 Windows 系统则不需要阅读此文&#xff0c;因为 win32com 库更方便。这篇文章中 Excel 转 HTML 的方案&#xff0c;主要弥补…...

编程日记 2026/3/19 3:17:41

Linux 安装 Ollama

1、下载地址 Download Ollama on Linux 2、有网络直接执行 curl -fsSL https://ollama.com/install.sh | sh 命令 3、下载慢的解决方法 1、curl -fsSL https://ollama.com/install.sh -o ollama_install.sh 2、sed -i s|https://ollama.com/download/ollama-linux|https://…...

编程日记 2026/4/24 21:45:30

使用Ollama本地部署deepseek

1、下载安装Ollama 前往下载页面 https://ollama.com/download下载好安装包&#xff0c;如同安装软件一样&#xff0c;直接安装即可 win中默认为C盘&#xff0c;如果需要修改到其他盘&#xff0c;查找具体教程 运行list命令&#xff0c;检查是否安装成功 2、修改模型下载的…...

编程日记 2026/4/29 0:58:16

如何在RTACAR中配置IP多播（IP Multicast）

一、什么是IP多播 IP多播&#xff08;IP Multicast&#xff09;是一种允许数据包从单一源地址发送到多个目标地址的技术&#xff0c;是一种高效的数据传输方式。 多播地址是专门用于多播通信的IP地址&#xff0c;范围从 224.0.0.0到239.255.255.255 与单播IP地址不同&#x…...

编程日记 2026/4/27 20:55:55

2025年最新版武书连SCD期刊（中国科学引文数据库）来源期刊已更新，可下载PDF版！需要的作者进来了解~

2025年最新版武书连SCD期刊&#xff08;中国科学引文数据库&#xff09;来源期刊已更新&#xff01; 官网是不提供免费查询的。小编给大家两个路径&#xff0c;无需下载PDF&#xff0c;随时随地都能查25版SCD目录。 路径一&#xff1a;中州期刊联盟官网&#xff0c;25版SCD目…...

编程日记 2026/4/28 15:52:13

已验证正常，Java输入字符串生成PDF文件

Java输入字符串生成PDF文件过程&#xff1a; 在Java开发中&#xff0c;如何将字符串转换为 PDF 是一个常见的需求。网上找了很多例子都无法生成&#xff0c;经过多次尝试&#xff0c;终于实现了&#xff0c;特此记录一下。 1、引入pom.xml 添加所需的依赖 <dependency>&…...

编程日记 2026/4/5 7:13:58

存储异常导致的Oracle重大生产故障

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验 Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯…...

编程日记 2026/4/10 3:51:12

基于Java的远程视频会议系统(源码+系统+论文)

第一章 概述 1.1 本课题的研究背景 随着人们对视频和音频信息的需求愈来愈强烈&#xff0c;追求远距离的视音频的同步交互成为新的时尚。近些年来&#xff0c;依托计算机技术、通信技术和网络条件的发展&#xff0c;集音频、视频、图像、文字、数据为一体的多媒体信息&#xff…...

编程日记 2026/4/29 11:59:23

C++ Primer 成员访问运算符

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…...

编程日记 2026/4/6 13:03:17

使用云效解决docker官方镜像拉取不到的问题

目录 前言原文地址测试jenkins构建结果:后续使用说明 前言 最近经常出现docker镜像进行拉取不了&#xff0c;流水线挂掉的问题&#xff0c;看到一个解决方案: 《借助阿里个人版镜像仓库云效实现全免费同步docker官方镜像到国内》 原文地址 https://developer.aliyun.com/artic…...

编程日记 2026/4/3 5:04:54

Oracle中与 NLS（National Language Support，国家语言支持） 相关的参数

在Oracle中&#xff0c;NLS_DATABASE_PARAMETERS 和 NLS_INSTANCE_PARAMETERS 是两个重要的视图&#xff0c;用于存储与 NLS&#xff08;National Language Support&#xff0c;国家语言支持&#xff09; 相关的参数。它们的作用和区别如下&#xff1a; 1. NLS_DATABASE_PARAME…...

编程日记 2026/4/2 14:24:03

【Pytorch实战教程】Python探索利器：dir与help深度解析（PyTorch实战演示）

文章目录 Python探索利器：dir与help深度解析（PyTorch实战演示）一、前言：代码世界的探险装备二、dir()：对象结构探测器1. 基础用法揭秘2. PyTorch实战应用三、help()：内置文档浏览器1. 基础使用姿势2. 深度学习场景实战四、组合技：探索神经网络模块1. 模块结构探测2. 类方…...

编程日记 2026/4/19 4:13:04

【DeepSeek】DeepSeek小模型蒸馏与本地部署深度解析DeepSeek小模型蒸馏与本地部署深度解析

一、引言与背景 在人工智能领域&#xff0c;大型语言模型&#xff08;LLM&#xff09;如DeepSeek以其卓越的自然语言理解和生成能力&#xff0c;推动了众多应用场景的发展。然而&#xff0c;大型模型的高昂计算和存储成本&#xff0c;以及潜在的数据隐私风险&#xff0c;限制了…...

编程日记 2026/4/11 10:42:05

【共享文件夹】使用Samba服务可在Ubuntu和Windows系统之间共享一个实际的文件夹

目标&#xff1a;在Ubuntu和Windows系统之间共享一个实际的文件夹&#xff0c;并能够共同编辑其中的文件 安装Samba创建共享文件夹配置Samba设置Samba密码重启Samba服务以应用更改&#xff1a;在Windows中访问共享文件夹如果客户机无法访问 Samba 服务器&#xff0c;解决方法①…...

编程日记 2026/4/2 12:49:21

3D图形学与可视化大屏：什么是几何着色器，有什么功能和应用。

一、几何着色器的定义 在 3D 图形学和可视化大屏中&#xff0c;几何着色器是一种可编程的图形处理单元&#xff08;GPU&#xff09;着色器阶段。它位于顶点着色器和片段着色器之间&#xff0c;主要负责处理由顶点着色器输出的几何图形数据。 几何着色器以图元&#xff08;如点…...

编程日记 2026/4/9 1:59:41

Python：凯撒密码

题目内容&#xff1a; 凯撒密码是古罗马恺撒大帝用来对军事情报进行加密的算法&#xff0c;它采用了替换方法对信息中的每一个英文字符循环替换为字母表序列该字符后面第三个字符&#xff0c;对应关系如下&#xff1a; 原文&#xff1a;A B C D E F G H I J K L M N O P Q R …...

编程日记 2026/4/7 2:35:48

C++ labmbd表达式

文章目录 C++ Lambda 表达式详解1. Lambda 表达式的组成部分：2. Lambda 语法示例(1) 最简单的 Lambda(2) 带参数的 Lambda(3) 指定返回类型的 Lambda3. 捕获外部变量(1) 值捕获（复制）(2) 引用捕获(3) 捕获所有变量4. Lambda 在 STL 中的应用5. Lambda 作为 `std::function`6…...

编程日记 2026/2/16 17:38:30