我正在使用找到的使用“事件”的代码。它有效,但我想知道应该使用什么来代替。
我是一名新手程序员,我缺少一些概念。在本例中,我使用的是在网上找到的代码,可以在下一个链接中找到: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(使用前将#替换为@)