Description
This is about blazor.
Is your feature request related to a problem? Please describe.
Currently, event bubbling works in blazor, but there isn't a way to find out which child element triggered the event.
For example:
<div id="div1" @onclick="@OnClick"> div 1
<div id="div2"> div 2</div>
<div id="div3"> div 3</div>
<div id="div4">
<span class="expand-icon"></span>
div 4
</div>
</div>
@code {
public void OnClick(UIMouseEventArgs args)
{
// not currently possible, used here as a suggestion (see below)
if (args.elementId == 2) // or if (args.elementClass == "expand-icon"
{
Expand();
}
else
{
Collapse();
}
}
public void Expand() { ... }
public void Collapse() { ... }
}
Clicking on div2 will trigger the OnClick handler, but you need to make a JS call in order to find out which element was actually clicked - div2 or div3.
Describe the solution you'd like
A way to find out which element was clicked. Exposing event.target is probably not possible due to wasm and it might not be necessary - what I need is rather an "identifier" for the event.target element rather than the element itself. For example, sending some specific attributes like id or class might be enough - if the <span class="expand-icon"></span> is clicked, getting its class can be used to trigger custom logic (e.g. "expand" or "collapse"). If using specific attributes is not possible due to some synchronizations problems with the DOM, can data- attributes be used instead, e.g.
<div id="div4">
<span class="expand-icon" data-id="@Id"></span>
div 4
</div>
@code {
public Guid Id { get; set; } = GetGuid();
public void OnClick(UIMouseEventArgs args)
{
if (args.target.Attributes["data-id"] == Id)
{
...
}
}
}
This should mean that the developer is responsible for providing the event.target "information" (`data-id="Id") explicitly and then handling it.
Additional context
This can be handled from JS and JS is probably better suited for more advanced scenarios, but maybe the UIMouseEventArgs class can expose some additional props for handling simpler scenarios. This might be also possible with using custom blazor components and exposing specific events, but this fails in cases with templates. For example, if the end user of the blazor component can completely override the "default" component that is used in the template. However, by using specific classes/attributes the overriden component might still work as the OnClick event handler checks for them.