Firefox中未定义事件

本文介绍了Firefox中未定义事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想使用此代码更改主题颜色设置，但在Firefox上不起作用.我使用的源代码来自以下网站: jonathan-harrell/experiment/live-theming-with-css-variables/.这是我的代码:

I want to change theme color settings using this code, but it is not working on Firefox. The source code that I used is from this website: jonathan-harrell/experiment/live-theming-with-css-variables/. Here is my code:

const setValue = (property, value) => { if (value) { document.documentElement.style.setProperty(`--${property}`, value); const input = document.querySelector(`#${property}`); if (input) { value = value.replace('px', ''); input.value = value; } } }; const setValueFromLocalStorage = property => { let value = localStorage.getItem(property); setValue(property, value); }; const setTheme = options => { for (let option of Object.keys(options)) { const property = option; const value = options[option]; setValue(property, value); localStorage.setItem(property, value); } } const dataThemeButtons = document.querySelectorAll('[data-theme]'); for (let i = 0; i < dataThemeButtons.length; i++) { dataThemeButtons[i].addEventListener('click', () => { const theme = dataThemeButtons[i].dataset.theme; switch (theme) { case 'default': setTheme({ 'meta-menu-background-color': '#50463d', 'link-color': '#ed1347', 'header-menu-color': '#50463d', 'header-menu-background-color': '#ffffff', 'footer-background-color': '#3c332e', 'footer-last-background-color': '#50463d', }); return; } }) } document.addEventListener('DOMContentLoaded', () => { setValueFromLocalStorage('meta-menu-background-color'), setValueFromLocalStorage('link-color'), setValueFromLocalStorage('header-menu-color'), setValueFromLocalStorage('footer-background-color'); setValueFromLocalStorage('footer-last-background-color'); }); const handleInputChange = (property, pixels) => { document.documentElement.style.setProperty(`--${property}`, `${event.target.value}${pixels ? 'px' : ''}`); localStorage.setItem(property, `${event.target.value}${pixels ? 'px' : ''}`); }; document.querySelector('#meta-menu-background-color').addEventListener('change', event => { handleInputChange('meta-menu-background-color', false); });

在Firefox控制台中，我在此行上看​​到错误"ReferenceError:未定义事件":

In Firefox console I see the error "ReferenceError: event is not defined" on this line:

document.documentElement.style.setProperty(`--${property}`, `${event.target.value}${pixels ? 'px' : ''}`);

在Chrome上运行正常.

It is working fine on Chrome.

您能帮我吗?

推荐答案

event 符号在IE和Chrome中是 global ，但在Firefox中作为参数传递.因此，您需要使用单个参数编写事件处理程序函数(如果需要，可以将其命名为 event )，然后向每个处理程序添加代码的前导行:

The event symbol is global in IE and Chrome, but it's passed as a parameter in Firefox. Thus you need to write your event handler functions with a single parameter (call it event if you want) and then add a preamble line of code to each handler:

function yourHandler(event) { event = event || window.event; // ... }