问题描述
我有一个对象文字,负责为键盘用户启用和禁用自定义大纲。所有自定义 outline
css 类都嵌入在 HTML 文档中并使用 :focus
激活。当用户从键盘切换到鼠标时,带有 outline: none
的 css 类将应用于所有可聚焦元素。请在下面找到代码。底部描述了我遇到的问题。
export const OUTLINE_FOR_KEYBOARD_USERS = {
focusableElements: document.querySelectorAll(`
.element1_outline,.element2_outline,.element3_outline,`),enableOutline () {
if (event.key === 'Tab' || (event.shiftKey && event.key === 'Tab')) {
document.addEventListener('focusin',OUTLINE_FOR_KEYBOARD_USERS.showOutline);
}
},showOutline () {
for (const elements of OUTLINE_FOR_KEYBOARD_USERS.focusableElements) {
elements.classList.remove('outline-none');
}
},hideOutline () {
for (const elements of OUTLINE_FOR_KEYBOARD_USERS.focusableElements) {
elements.classList.add('outline-none');
}
document.removeEventListener('focusin',OUTLINE_FOR_KEYBOARD_USERS.showOutline);
},};
在主JS文件中:
import { OUTLINE_FOR_KEYBOARD_USERS } from './modules/outline-for-keyboard-users.js';
document.addEventListener('keydown',() => OUTLINE_FOR_KEYBOARD_USERS.enableOutline(event));
document.addEventListener('mousedown',() => OUTLINE_FOR_KEYBOARD_USERS.hideOutline());
在同一个主JS文件中调用Ajax: 这是当用户从购物篮中移除所有产品并加载新元素以显示“购物篮为空”页面时的情况。
function controlBasket (event) {
event.preventDefault();
$.ajax({
url: url,method: 'POST',data: {
// some data
},success(response) {
if (removeAllLinkClicked) {
loadElementsForBasketEmptyPage(response);
},});
}
function loadElementsForBasketEmptyPage (response) {
const basketEmptyPageFocusableElements = ($('<div/>').append(response).find('.element1_outline,.element1_outline,.element1_outline'));
OUTLINE_FOR_KEYBOARD_USERS.focusableElements = basketEmptyPageFocusableElements;
}
除了我用 ajax 更新购物车页面之外,一切都很好。在这种情况下,当我在单击任何 focusableElements
后从对象内为 focusableElements
运行 console.log 时,我可以看到已添加了 css 类 outline: none
但是当我检查开发工具中的元素我看不到添加的类 outline: none
。这就像更改仅从对象内部可见,而不能从文档(全局?)上下文中看到,因此当我单击任何 focusableElements
时,轮廓仍然存在。
如果我刷新页面,它就可以正常工作。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)