Comments (5)
To be more clear. My code is loaded inside a ES Module.
component('taskbar icons', () => {
return `<icon><i class="fa-brands fa-windows"></i></icon>
${Object.entries(TASKBAR.#ICONS).map(([key, value]) => {
return `<icon data-id="${value.id}" onclick="iconClick();"><i class="${value.icon}"></i> ${value.label ?? ''}</icon>`
})}`
}, { events: true });
And it appears that because of this the onclick
event can't be reached unless I define it outside of my module... Which kinda defeats the whole purpose of developing an es module.
from reef.
You have a few options.
One (my preferred method) is to use event delegation.
component('taskbar icons', () => {
return `<icon><i class="fa-brands fa-windows"></i></icon>
${Object.entries(TASKBAR.#ICONS).map(([key, value]) => {
return `<icon data-id="${value.id}"><i class="${value.icon}"></i> ${value.label ?? ''}</icon>`
})}`
});
document.addEventListener('click', function (event) {
// Only run on our target elements
if (!event.target.matches('icon[data-id]') return;
// Do stuff...
});
Alternatively, you can include your event handler inside the ES module.
function onClick () {
// Do stuff...
}
component('taskbar icons', () => {
return `<icon><i class="fa-brands fa-windows"></i></icon>
${Object.entries(TASKBAR.#ICONS).map(([key, value]) => {
return `<icon data-id="${value.id}" onclick="iconClick();"><i class="${value.icon}"></i> ${value.label ?? ''}</icon>`
})}`
}, { events: true });
And it appears that because of this the
onclick
event can't be reached unless I define it outside of my module... Which kinda defeats the whole purpose of developing an es module.
I'm not sure I follow. If you include it in the module and import
that module, the function should be available as a side-effect. I can't speak to your specific build setup, though.
As an aside, you shouldn't attach click
handlers to non-focusable elements.
In the example above, icon
is not a focusable element, and thus can never be reached by keyboard users. Additionally, folks who use a screen reader will not know it's an interactive element.
from reef.
So I ended up basically going with event delegation, because I was doing what you did in your second example and that was not working
function iconClick() {
MODULE.log('hello World');
}
component('taskbar icons', () => {
return `<icon><i class="fa-brands fa-windows"></i></icon>
${Object.entries(TASKBAR.#ICONS).map(([key, value]) => {
return `<icon key="${value.id}" onclick="iconClick();"><i class="${value.icon}"></i> ${value.label ?? ''}</icon>`
})}`
}, { events: true });
This does not work for me, I get the error
As for the non-focusable
elements issue. this is being used in a virtual tabletop application... Basically, if you're blind you can't use the app anyways. So accessibility is not really a concern for this specific use case, but thank you for letting me know.
from reef.
this is being used in a virtual tabletop application... Basically, if you're blind you can't use the app anyways.
I cannot understate how bad and objectively wrong this response it.
You absolutely can build VTT's accessibly, accessibility is always a concern, not building it accessibly is likely a violation of the ADA, and you're not fulfilling your professional obligations as a web developer.
from reef.
I am not the creator of the program. Switching the elements over only temporarily solves the issue as it still requires you to click on one of the buttons before you can tab over to the next one.
Hitting the tab before you've clicked on a button will never get you to the buttons.
from reef.
Related Issues (20)
- Input fields not updated to reflect data changes HOT 3
- Issues with listeners and multiple on events HOT 1
- "Ready" event never fires HOT 1
- Binding input value changes to data HOT 1
- Objects with functions lost when copied to props HOT 1
- "on" attributes not being properly converted to event listeners
- Obj events = {} storing duplicate event listiners causing duplicate calls HOT 3
- Add component.destroy() method HOT 3
- Add Source Map Files HOT 1
- Nested Components + events? HOT 1
- Support key for memoization HOT 3
- Use domdiff? HOT 3
- Using Map or Set as store HOT 2
- Is there a way to force a component to "rerender" without adding content? HOT 3
- Working with Events Questions HOT 2
- Lifecycle Events - reef:render is fired on all components in the document HOT 2
- Can I use Reef to generate the HTML for a given route? HOT 1
- Updating Multiple Properties at Once HOT 10
- Lack of event support in component HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reef.