“事件”已被弃用,应该使用什么来代替?

2024-04-13

我正在使用找到的使用“事件”的代码。它有效,但我想知道应该使用什么来代替。

我是一名新手程序员,我缺少一些概念。在本例中,我使用的是在网上找到的代码,可以在下一个链接中找到:https://codepen.io/galulex/pen/eNZRVq https://codepen.io/galulex/pen/eNZRVq

PhpStorm 向我显示 onmousemove="zoom(event)" 上的“event”已被弃用。我尝试过删除它,但效果并不好。我想知道我应该使用什么来代替事件。

<figure class="zoom" onmousemove="zoom(event)" style="background-image: url(//res.cloudinary.com/active-bridge/image/upload/slide1.jpg)">
  <img src="//res.cloudinary.com/active-bridge/image/upload/slide1.jpg" />
</figure>
function zoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}

The event全局对象的属性(通常window在 Web 浏览器中)最初是由 Microsoft 在 Internet Explorer 中添加的。正如经常发生的那样,它随后逐渐进入其他流行的 Web 浏览器,并成为另一个事实上的“标准”,但当时并未得到 W3C 或类似机构的正式指定。

最终,WHATWG http://www.whatwg.org以向后兼容的名义追溯指定它,将其定义为“当前”事件 http://dom.spec.whatwg.org/#ref-for-dom-window-event,并附有警告说明:

强烈鼓励 Web 开发人员转而依赖Event http://dom.spec.whatwg.org/#event对象传递给事件侦听器,因为这将导致更可移植的代码。此属性在工作程序或工作集中不可用,并且对于在以下位置分派的事件不准确影子树 http://dom.spec.whatwg.org/#concept-shadow-tree.

因此,解决您的用例所属的广泛问题的惯用解决方案是在元素或其祖先上附加一个事件侦听器,通常使用addEventListener http://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener函数,并使用显式传递给侦听器的事件对象。

在你的具体情况下,假设figure下面指的是你的,嗯,figure元素,事件监听器(zoom) 可以这样附加:

figure.addEventListener("mousemove", zoom);

自从你的zoom函数已经假设它传递的单个参数是鼠标移动事件,它将继续作为事件侦听器工作,无需更改 - 每次鼠标移动时,都会使用作为唯一参数传递的感兴趣的事件来调用它。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

“事件”已被弃用,应该使用什么来代替? 的相关文章

  • 如何在图像上叠加徽标?使用CSS

    正如您所看到的 徽标显示在背景图像上方 但我希望它位于背景图像的中心 这是我的标题 背景需要从页面顶部开始并在菜单之前结束 徽标需要显示在背景图像的中央 我已经尝试了很多 但也许有人遇到了类似的问题 可以帮助我解决这个问题 这张图片显示它几
  • 在 JavaScript 中解析日期时间字符串

    有谁知道如何解析所需格式的日期字符串dd mm yyyy See Mozilla Core JavaScript 参考 日期对象 https developer mozilla org en Core JavaScript 1 5 Refe
  • 在选择下拉列表中选择特定选项时添加输入框

    我需要在选择选项时将输入添加到选择选项中 每当用户选择 其他 时 就会出现一个输入框供用户输入数据 HTML
  • 匹配CSS的正则表达式“<属性>:<值>”

    我从以下位置检索了 CSS 规则document styleSheets现在我正在寻找提取它的属性和值 cssText expl position absolute background color rgb 204 204 204 max
  • 添加数组的总和。显示1个输出

    更新 这个问题的答案如下 感谢在不同线程上进行的 dougtesting 将数组相加 显示总和 https stackoverflow com questions 45724641 add array together display su
  • 如何绕过 IE8 对 data:uri Base64 编码的 32k 限制?

    我需要向浏览器发送包含 1920x1080 png 的 html 响应 这是一个 html 查询截取的屏幕截图 我对图像进行 base64 编码 并将其作为 text html 内容类型嵌入发送 一些简单的事情 比如 Whatever im
  • 代理阻止网络套接字?如何绕行

    我有一个用 Python 编写的正在运行的 websocket 服务器 来自https github com opiate SimpleWebSocketServer https github com opiate SimpleWebSoc
  • 一个输入字段,多个名称

    在 HTML 表单中 如何从一个输入字段获取两个姓名 是否可以通过隐藏的输入字段 如何 我试图使隐藏字段值动态等于非隐藏字段值 这样无论用户写什么 它们都相等 但我确信它不起作用 而不是像这样的东西是否会起作用工作 Here http ww
  • 如何让更大的布局适合小设备屏幕?

    我有一个小问题meta viewport元素 问题是我的布局min width比我想要使用的许多屏幕分辨率都要大 所以将其设置为 没有帮助 结果我得到的页面必须缩小以适应设备宽度 如果我什至添加像 它也不起作用 发现了一个黑客来自CSS 技
  • 在 forEach() 中使用 `this` [重复]

    这个问题在这里已经有答案了 免责声明 我正在学习 JavaScript 我有一个像这样的对象构造函数 var Palette function this colors red green blue this getColorCombinat
  • 将 JSON 字符串传递给 Django 模板

    我一直在用头撞墙 试图找出为什么我无法将从 Django 模型生成的 JSON 字符串传递到模板的 javascript 静态文件中 事实证明 问题不在模型级别 使用serializers serialize 在脚本本身中放入相同的字符串将
  • 使用 System.js 导入 Typescript 编译的模块时出错

    我最近正在学习使用 system js 导入由 Typescript 编译的模块 这些模块之前是为 require js 编译的 并且工作正常 但是合并到system js时 应用时无法导入模块系统生产 js 控制台说 Uncaught i
  • 如何在纯 HTML 页面中返回特定的 HTTP 状态代码

    Google 建议当网站暂时不可用时返回 503 HTTP 响应 我有一些纯 HTML 网站 如何在纯 HTML 网站中返回 503 状态 我使用的是带有 Apache 的 Linux 机器 您必须在服务器上而不是在 HTML 文件中设置状
  • bootstrap-datetimepicker 仅显示日期

    我正在用这个repo https github com smalot bootstrap datetimepicker由 smalot 提供 我只想选择并显示日期 对于其他一些地方 我显示数据和时间 因此选择此存储库 我可以设法仅使用它来选
  • EaselJS Alpha 遮罩滤镜

    我对 Canvas 还很陌生 我一直在尝试将图像颠倒过来EaselJS Alpha 蒙版 http www createjs com demos easeljs alphamaskreveal示例 以便初始图像清晰 并且您可以paint是模
  • 在 gulp 和 browsersync 问题中观看新文件

    我使用 browsersync 在文件更改时重新加载浏览器 而且它工作完美 但是当我创建新文件 例如 html scss js 时 bowsersync 不起作用 如何解决这个问题 gulpjs Browser Sync gulp task
  • 在 Nest.js 中发送之前如何格式化响应?

    我按照文档进行操作 并能够添加用于响应映射的拦截器 我想要一致的 json 格式输出作为响应 我怎样才能用拦截器或其他比这种方法更好的方法来实现这一点 statusCode 201 message Custom Dynamic Messag
  • 如何使 CSS 动画/过渡以固定速度而不是固定持续时间播放? [复制]

    这个问题在这里已经有答案了 我有一个 CSS 动画 可以使元素沿直线移动未定义的距离 据我所知 动画具有固定的持续时间 因此无论元素必须移动多远 动画始终需要相同的时间来运行 我该如何制作才能使动画没有固定的duration 但有固定的运动
  • 如何选中表格中输入文本焦点上的复选框

    我试图在输入文本焦点上检查表 DOM 中的复选框 但无法访问复选框元素 但我的焦点正在工作 这是我的 jsfiddle 链接https jsfiddle net 9qha9vft https jsfiddle net 9qha9vft 这是
  • JavaScript:如何在 Internet Explorer 中模拟更改事件(委托)

    UPDATE 回顾 小提琴和赏金 这个问题并没有引起太多关注 所以我将花一些时间来解决这个问题 我知道我的答案和问题都过于冗长 这就是为什么我继续设置这把小提琴 http jsfiddle net vVA8N 在我看来 这是我目前必须用来接

随机推荐

  • R 中的负向前瞻未按预期运行

    我正在尝试替换以以下开头的字符串中的实例abc在我正在 R 中使用的文本中 输出文本在 HTML 中经过几次突出显示 因此我需要替换以忽略 HTML 插入符内的文本 以下内容似乎在 Python 中有效 但我在 R 中的正则表达式上没有得到
  • 如何在 SwiftUI 中以编程方式编辑 TextField 的边框颜色?

    这是代码片段 TextField Email text self email padding overlay RoundedRectangle cornerRadius 1 stroke Color black lineWidth 1 Se
  • Django 用交集计数注释查询集

    Djangonauts 我需要挖掘你们的大脑 简而言之 我有以下三个模型 class Location models Model name models CharField max length 100 class Profile mode
  • 如何将 window-1251(俄语西里尔字母)MySql 数据库转换为 UTF-8

    我有一个俄罗斯网站的数据库 其编码为 windows 1251 换句话说 来自 phpmyadmin 的字母如下所示 换句话说就是难以辨认的字符 为了正确显示内容 必须在 php ini 中添加此代码 header Content Type
  • 浮点线性插值

    在两个变量之间进行线性插值a and b给定一个分数f 我目前正在使用这段代码 float lerp float a float b float f return a 1 0 f b f 我认为可能有一种更有效的方法 我使用的是没有 FPU
  • .net 标准库中的 HttpContext

    我正在开展几个项目 其中之一是ASP NET 4 5应用程序 另一个是 Net Core API 1 1项目 asp net 应用程序正在使用HttpContext读取 cookie 和页眉的类 现在 我需要将其移至 net 标准库 该库可
  • POSIX 风格的操作系统中的命令行选项应该是下划线风格吗? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 POSIX 风格操作系统中程序的命令行选项名称是否应该是下划线风格 例如 cure world hunger 或者也许是其他风格 curewor
  • 函数的“static new”修饰符有什么意义?

    今天 我在遗留代码中发现了一些东西 它具有 静态新 一项功能 看起来像这样 class Foo public static void Do Console WriteLine Foo Do class Bar Foo public stat
  • 如何在 C# .NET 中“克隆”WebControl?

    我的基本问题是 在 NET 中 如何克隆 WebControls 我想构建一个自定义标签 它可以生成其子代的多个副本 最终我打算构建一个类似于 JSP Struts 中的标签 但我遇到的第一个障碍是复制 克隆控件内容的能力 考虑一下这个相当
  • 即使我位于正确的域中,Selenium addCookie 也会出现无效的 Cookie 域异常

    因此 我尝试使用 Selenium Geb 将以前保存的 cookie 加载到我的网络驱动程序中 首先 我进入域 然后尝试添加 cookie 但是 cookie 域和 url 域不互相注册 Caught org openqa seleniu
  • 如何查找网站上的所有链接/页面

    是否可以找到任何给定网站上的所有页面和链接 我想输入一个 URL 并生成该站点所有链接的目录树 我查看过 HTTrack 但它下载了整个站点 我只需要目录树 查看链接检查器 https linkchecker github io linkc
  • 直接从 R 脚本读取 Excel 文件

    如何将 Excel 文件直接读取到 R 中 或者我应该首先将数据导出到文本或 CSV 文件 然后将该文件导入到 R 中 让我重申 Chase 的建议 使用XL连接 http cran r project org web packages X
  • Turtle 图形窗口无法在 VS Code 中工作 [重复]

    这个问题在这里已经有答案了 我使用 Visual Studio Code 作为 IDE 而且我是 Python 的初学者 因此我决定尝试使用 Python 内置的海龟库来学习一些语法 然而 当我尝试运行一个简单的脚本来查看它是否有效时 窗口
  • 将“符号”中的值列转换/透视/转置为列名称,并将当前列名称转换为 R 语言中的值列[关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 这些是输出之前和之后的镜头 我正在寻找这个问题的所有可能的解决方案 越简单越好 我是 R 新手 所以我不确定如何很好地使
  • 为什么我们在 selenium webdriver 中需要 guava?

    我使用 Maven 创建了 Selenium Web 驱动程序项目 我在某处读到我们需要添加番石榴依赖项 有人能解释为什么我们需要番石榴对硒的依赖吗 这是我能安排的最好的信息 总结一下答案 Selenium uses Guava图书馆Fun
  • 如何删除 Cocoa 应用程序中 WebView 存储的 cookie?

    我的 Cocoa 应用程序使用WebView打开使用 cookie 的页面 出于测试目的 我想删除这些 cookie 我怎样才能做到这一点 以编程方式或手动 如果您想以编程方式执行此操作 可以使用NSHTTPCookieStorage ht
  • moz 行为在 Firefox 10 中有效吗?

    我下载了一个moz behavior 用法示例 http dean edwards name download moz behaviors xml但它在 Firefox 10 中不起作用 我需要更改某些内容才能使其工作吗 不可以 从 Fir
  • 数据绑定到 WPF 树视图中的 SelectedItem

    如何检索在 WPF 树视图中选择的项目 我想在 XAML 中执行此操作 因为我想绑定它 You might think that it is SelectedItem but apparently that does not exist i
  • Android 片段 WebView

    我为我所在国家 地区的某人创建应用程序 我的应用程序有问题 我的应用程序有幻灯片菜单 同样的这个应用程序 Youtube https i stack imgur com 4hxlM png https i stack imgur com 4
  • “事件”已被弃用,应该使用什么来代替?

    我正在使用找到的使用 事件 的代码 它有效 但我想知道应该使用什么来代替 我是一名新手程序员 我缺少一些概念 在本例中 我使用的是在网上找到的代码 可以在下一个链接中找到 https codepen io galulex pen eNZRV