Firefox中未定义事件 [英] Event is not defined in Firefox
问题描述
我想使用此代码更改主题颜色设置,但在Firefox上不起作用.我使用的源代码来自以下网站: https://jonathan-harrell.com/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: https://jonathan-harrell.com/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;
// ...
}
这篇关于Firefox中未定义事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!