使用 addEventListener 添加事件作为函数内的参数(在 Firefox/IE 中不起作用)

2024-01-26

<html>
<head>
<title>FML</title>

<script type="text/javascript">

function function1(e, div) {
div.innerHTML="this works"
document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX
div.addEventListener("mousemove", function(){test(event, this)}, true);
}

function test(e, div) {
div.innerHTML+='<br/>so does this'
//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener
document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY
}

</script>
</head>
<body>
<span id="myspan">&nbsp;</span>
<span id="myspan2">&nbsp;</span>
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;"  onclick="function1(event, this)">
</body>
</html>

单击蓝色 div。

我想添加活动mouseover,让它执行test()- 函数应包含以下参数:this、event

当函数test(e, div)称为我在 Firefox 和 IE 中不断收到“事件未定义”错误,尽管具有讽刺意味的是它在 Chrome 和 Safari 中完美运行。

我可以通过使用添加事件参数的任何方式addEventListener?我可以让它工作window.event在 Chrome 和 Safari 中,但这正是我想要的设置。我已经用谷歌搜索和尝试/犯错有一段时间了,但没有成功......所以FML:/除了朝自己的头开枪之外,还有什么技巧/提示/......吗?

我知道 jQuery 可能会解决所有这些问题,但我想在迁移到 jQuery 之前先精通 Javascript。或者我应该迁移吗?


div.addEventListener("mousemove", function(){test(event, this)}, true);

好吧,你当然会得到“事件未定义”!当。。。的时候mousemove事件触发器,您的事件处理程序被调用:

function(){test(event, this)}

有两种方法可以到达事件信息对象。它要么作为参数传递给事件处理程序,要么可以在window.event.

假设第二种情况成立。因为没有名为的局部变量event在你的函数中,也没有这样的变量function1调用它,浏览器会查找是否有event定义在全局对象中。在 JavaScript 中,全局对象被称为window,所以你的函数被解释为

function(){test(window.event, this)}

它有效。

但是,正如我之前指出的,在某些浏览器中,事件信息是在参数中传递的。所以你的事件处理程序可能希望看起来像这样:

function(event){test(event, this)}

否则event传递给test()将是未定义的。因此,这是制作跨浏览器处理程序的方法:

function(event) {
  if (!event) // i.e. the argument is undefined or null
      event = window.event;

  test(event, this);
}

第二个问题是addEventListener()在较旧的 IE 中不起作用(但在 IE9 中起作用)。对于较旧的 IE,您必须使用类似的函数,称为attachEvent()。或者,如果您只附加一个处理程序,您可以用简单的方法来完成

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

使用 addEventListener 添加事件作为函数内的参数(在 Firefox/IE 中不起作用) 的相关文章

  • Bootstrap 按钮的检查状态

    我想在 Bootstrap 3 0 2 中设置组复选框的选中状态 docs http getbootstrap com javascript buttons html div class btn group div
  • 如何将webview内容划分为多个页面

    我必须使用 Android 上的 PdfDocument 从 webView 创建 PDF https developer android com reference android graphics pdf PdfDocument htm
  • Angular JS未知提供者错误

    删除 Bower components 并清理缓存后 我使用 Bower install 重新安装了依赖项 该应用程序无法加载并出现以下错误 未捕获的错误 injector unpr 未知提供程序 forceReflowProvider 这
  • 热成像调色板

    自热成像早期以来 红外热像仪经常使用独特的调色板 从黑色到蓝色 品红色 橙色 黄色到亮白色 这个调色板通常被称为Iron or Ironbow 这是使用前视红外相机拍摄的图像的典型假彩色可视化 来源 维基百科 术语科特 http commo
  • 使用express记录所有GraphQL响应

    我成功地设置了记录 graphQL 错误 app use graphql graphqlHTTP request gt return schema rootValue request formatError error gt const p
  • ES6 在defineAsyncComponent 中命名导入

    我想异步加载我的网络应用程序的一些元素 这是旧的导入 import Popover PopoverButton PopoverPanel from headlessui vue export default components Popov
  • 显示 div 内的用户名列表

    我是 jQuery 新手 在我的项目中 我创建了一个类User其中代码如下所示 static ConcurrentDictionary
  • 为什么此 Firebase 可调用函数不返回值?

    我有一个应返回值的可调用函数 但唯一返回的是 null 以下是该功能的当前版本 我也尝试过回报第一个承诺 原来的once调用 最后在另一个then返回 GUID 在这种情况下它实际上返回了数据 但它立即返回并且 GUID 为空 我怎样才能实
  • YouTube 播放器 API:getDuration()、getCurrentTime()、getVideoData() 不起作用

    对于我的应用程序 我尝试使用 YouTube Iframe 播放器 API 来播放视频 并允许用户更改视频而无需重新加载页面 我通过使用来实现这一点player loadVideoById video id 方法 通过YouTube视频id
  • Xml、xsl Javascript 排序

    我正在寻找一种使用 javascript 对 xml 数据进行排序的方法 并希望最终过滤掉数据 我知道这一切都可以在 xsl 文件中实现 但我想在客户端进行 我已经搜索了多个使用 javascript 进行排序的地方 但其中大部分要么太特定
  • innerText 和 html 之间的区别

    有什么区别innerText text and html innerText or text http docs jquery com Attributes text如果您使用的是 jQuery 不包含任何 HTML 标签 因此 如果您有一
  • xhr 响应 for 循环不起作用

    我有 xhr 和 for 循环 它的工作非常罕见 for var i 0 i lt this files length i var xhr new XMLHttpRequest xhr upload onprogress function
  • 如何使用 jQuery 显示“忙”指示器?

    如何在网页中的特定点显示旋转的 忙 指示器 我想在 Ajax 请求开始 完成时启动 停止指示器 这真的只是显示 隐藏 gif 动画的问题 还是有更优雅的解决方案 您可以只显示 隐藏 gif 但您也可以将其嵌入到 ajaxSetup 中 以便
  • 谷歌colab录音,如何实现更精确的方式告诉用户开始对着麦克风说话

    我正在尝试创建一个为机器学习项目录制音频的程序 我想使用 google colab 这样人们就不必在他们的系统上安装或运行任何东西 我在网上找到了这个录制和播放音频的示例 单元格 1 包含用于录制音频的 js 代码和用于将其转换为字节对象的
  • 无法使用 Excel JavaScript API 设置 NumberFormat

    我正在使用 Excel Javascript API 在搜索文档后 仍然找不到我想要实现的解决方案 因此 我想将所有内容设置为数字格式 文本 这样 Excel 的自动格式设置就不会与任何单元格的内容混淆 不会删除前导零或更改日期格式 文档建
  • Ace Editor 自动完成和多种语言

    如何为 Ace 编辑器创建自动完成功能以及如何突出显示 php 中的 html javascript 和 csshttp ace ajax org http ace ajax org
  • 带数字键的 Immutable.js 映射(包括性能测试)

    我在 React Native 应用程序中将 Immutable js 与 Redux 结合使用 元数据 例如查找表 是从服务器获取的 并作为 Immutable Map 保存在应用程序本地 查找值的键是整数 数据库中的主键 当我获取数据时
  • 为什么间接更改复选框时不会触发复选框上的 onchange

    我使用 Prototype 来监视复选框 因此我可以向它们添加 javascript 检查 当单击复选框所在的 tr 或 td 时 应选中该复选框 当您直接单击复选框时 会触发 onchange 事件 因此您会收到警报 当 javascri
  • 如何在不接受焦点的元素上捕获键盘事件?

    我知道要处理输入字段中的键盘事件 您可以使用 input keyup function e var code e keyCode and 13 is the keyCode for Enter 但是 现在 我有一些div and li元素
  • IE8 - 隐藏 div 内的表单,返回键不再起作用

    我有一个登录表单 位于带有 display none 的 div 中 然后我使用 jquery 淡入表单 但 Enter Return 键不再提交表单 如果我将显示更改为阻止 则效果很好 此问题仅存在于 IE 中 有任何想法吗 这是一个不起

随机推荐