时间戳

首页 > 解决方案 > 当 css id 隐藏它们时，访问在全局范围内定义的 js 函数

javascript - 当 css id 隐藏它们时，访问在全局范围内定义的 js 函数

问题描述

鉴于此 html 文档：

<script>
 const testfn = (e) => {
   e.preventDefault();
   console.log(e);
 }
</script>
<form onsubmit='testfn(event)'>
    <input id='testfn'>
    <button type='submit'>submit</button>
</form>

如何使用testfn脚本标签中定义的事件处理程序？

（onsubmit 处理程序中的范围内testfn是输入元素，因为它具有匹配的 id）

编辑：

有趣的是，这个问题只发生在它以某种形式发生并且

  1. 具有 id 的元素是一个input元素
  2. 带有附加事件处理程序的元素也是一个input-ish 元素：输入、按钮或表单的 onsubmit

鉴于它是这样的，也许对于运动来说，更好的问题是：有没有办法仍然从输入的 onsubmit/click 属性访问 javascript 函数？

标签： javascriptcssbrowserscopefrontend

解决方案

有两种基本方法可以解决这个问题。

不要使用内在事件属性

正如您所发现的，它们对范围做了一些讨厌的事情。而是使用 JS 绑定事件处理程序。

document.querySelector("form").addEventListener("submit", testfn);

window通过对象访问全局

为此，该函数首先必须附加到窗口对象。var用而不是声明它const。

var testfn = etc;

然后您可以访问：

onsubmit="window.testfn(event)"

我推荐前一种方法。

有趣的是，这个问题只发生在表单中

这是由多种因素共同造成的。内在事件属性搜索它们所绑定到的事件的属性，并且将具有 id 的控件放在表单中会为表单上与该 ID 匹配的元素提供访问器属性。

所以<form onsubmit='testfn(event)'>最终访问theForm.testfn哪个是输入。

推荐阅读