Rename "stop bubbling" to "stop propagation" for consistency with JS
This commit is contained in:
parent
896feb49e9
commit
580184d7de
|
|
@ -13,7 +13,7 @@ const preventDefaultEvents: { [eventType: string]: boolean } = { submit: true };
|
|||
const rootComponentsPendingFirstRender: { [componentId: number]: LogicalElement } = {};
|
||||
const internalAttributeNamePrefix = '__internal_';
|
||||
const eventPreventDefaultAttributeNamePrefix = 'preventDefault_';
|
||||
const eventStopBubblingAttributeNamePrefix = 'stopBubbling_';
|
||||
const eventStopPropagationAttributeNamePrefix = 'stopPropagation_';
|
||||
|
||||
export class BrowserRenderer {
|
||||
private eventDelegator: EventDelegator;
|
||||
|
|
@ -327,10 +327,10 @@ export class BrowserRenderer {
|
|||
private applyInternalAttribute(batch: RenderBatch, element: Element, internalAttributeName: string, attributeFrame: RenderTreeFrame | null) {
|
||||
const attributeValue = attributeFrame ? batch.frameReader.attributeValue(attributeFrame) : null;
|
||||
|
||||
if (internalAttributeName.startsWith(eventStopBubblingAttributeNamePrefix)) {
|
||||
// Stop bubbling
|
||||
const eventName = stripOnPrefix(internalAttributeName.substring(eventStopBubblingAttributeNamePrefix.length));
|
||||
this.eventDelegator.setStopBubbling(element, eventName, attributeValue !== null);
|
||||
if (internalAttributeName.startsWith(eventStopPropagationAttributeNamePrefix)) {
|
||||
// Stop propagation
|
||||
const eventName = stripOnPrefix(internalAttributeName.substring(eventStopPropagationAttributeNamePrefix.length));
|
||||
this.eventDelegator.setStopPropagation(element, eventName, attributeValue !== null);
|
||||
} else if (internalAttributeName.startsWith(eventPreventDefaultAttributeNamePrefix)) {
|
||||
// Prevent default
|
||||
const eventName = stripOnPrefix(internalAttributeName.substring(eventPreventDefaultAttributeNamePrefix.length));
|
||||
|
|
|
|||
|
|
@ -89,9 +89,9 @@ export class EventDelegator {
|
|||
this.eventInfoStore.addGlobalListener('click');
|
||||
}
|
||||
|
||||
public setStopBubbling(element: Element, eventName: string, value: boolean) {
|
||||
public setStopPropagation(element: Element, eventName: string, value: boolean) {
|
||||
const infoForElement = this.getEventHandlerInfosForElement(element, true)!;
|
||||
infoForElement.stopBubbling(eventName, value);
|
||||
infoForElement.stopPropagation(eventName, value);
|
||||
}
|
||||
|
||||
public setPreventDefault(element: Element, eventName: string, value: boolean) {
|
||||
|
|
@ -108,7 +108,7 @@ export class EventDelegator {
|
|||
let candidateElement = evt.target as Element | null;
|
||||
let eventArgs: EventForDotNet<UIEventArgs> | null = null; // Populate lazily
|
||||
const eventIsNonBubbling = nonBubblingEvents.hasOwnProperty(evt.type);
|
||||
let stopBubblingWasRequested = false;
|
||||
let stopPropagationWasRequested = false;
|
||||
while (candidateElement) {
|
||||
const handlerInfos = this.getEventHandlerInfosForElement(candidateElement, false);
|
||||
if (handlerInfos) {
|
||||
|
|
@ -123,8 +123,8 @@ export class EventDelegator {
|
|||
this.onEvent(evt, handlerInfo.eventHandlerId, eventArgs, eventFieldInfo);
|
||||
}
|
||||
|
||||
if (handlerInfos.stopBubbling(evt.type)) {
|
||||
stopBubblingWasRequested = true;
|
||||
if (handlerInfos.stopPropagation(evt.type)) {
|
||||
stopPropagationWasRequested = true;
|
||||
}
|
||||
|
||||
if (handlerInfos.preventDefault(evt.type)) {
|
||||
|
|
@ -139,7 +139,7 @@ export class EventDelegator {
|
|||
}
|
||||
}
|
||||
|
||||
candidateElement = (eventIsNonBubbling || stopBubblingWasRequested) ? null : candidateElement.parentElement;
|
||||
candidateElement = (eventIsNonBubbling || stopPropagationWasRequested) ? null : candidateElement.parentElement;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -226,7 +226,7 @@ class EventHandlerInfosForElement {
|
|||
// So to keep things simple, only track one EventHandlerInfo per (element, eventName)
|
||||
private handlers: { [eventName: string]: EventHandlerInfo } = {};
|
||||
private preventDefaultFlags: { [eventName: string]: boolean } | null = null;
|
||||
private stopBubblingFlags: { [eventName: string]: boolean } | null = null;
|
||||
private stopPropagationFlags: { [eventName: string]: boolean } | null = null;
|
||||
|
||||
public getHandler(eventName: string): EventHandlerInfo | null {
|
||||
return this.handlers.hasOwnProperty(eventName) ? this.handlers[eventName] : null;
|
||||
|
|
@ -249,13 +249,13 @@ class EventHandlerInfosForElement {
|
|||
return this.preventDefaultFlags ? this.preventDefaultFlags[eventName] : false;
|
||||
}
|
||||
|
||||
public stopBubbling(eventName: string, setValue?: boolean): boolean {
|
||||
public stopPropagation(eventName: string, setValue?: boolean): boolean {
|
||||
if (setValue !== undefined) {
|
||||
this.stopBubblingFlags = this.stopBubblingFlags || {};
|
||||
this.stopBubblingFlags[eventName] = setValue;
|
||||
this.stopPropagationFlags = this.stopPropagationFlags || {};
|
||||
this.stopPropagationFlags[eventName] = setValue;
|
||||
}
|
||||
|
||||
return this.stopBubblingFlags ? this.stopBubblingFlags[eventName] : false;
|
||||
return this.stopPropagationFlags ? this.stopPropagationFlags[eventName] : false;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ function enableNavigationInterception() {
|
|||
|
||||
export function attachToEventDelegator(eventDelegator: EventDelegator) {
|
||||
// We need to participate in EventDelegator's synthetic event bubbling process
|
||||
// (so we can respect stopBubbling/preventDefault), so register with that instead
|
||||
// (so we can respect stopPropagation/preventDefault), so register with that instead
|
||||
// of using a native JS event
|
||||
eventDelegator.addLinkClickListener((clickEvent, anchorElement) => {
|
||||
if (!hasEnabledNavigationInterception) {
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@ namespace Microsoft.AspNetCore.Components.Web
|
|||
/// </summary>
|
||||
public static class RenderTreeBuilderExtensions
|
||||
{
|
||||
// The "prevent default" and "stop bubbling" flags behave like attributes, in that:
|
||||
// The "prevent default" and "stop propagation" flags behave like attributes, in that:
|
||||
// - you can have multiple of them on a given element (for separate events)
|
||||
// - you can add and remove them dynamically
|
||||
// - they are independent of other attributes (e.g., you can "stop bubbling" of a given
|
||||
// - they are independent of other attributes (e.g., you can "stop propagation" of a given
|
||||
// event type on an element that doesn't itself have a handler for that event)
|
||||
// As such, they are represented as attributes to give the right diffing behavior.
|
||||
//
|
||||
|
|
@ -39,15 +39,15 @@ namespace Microsoft.AspNetCore.Components.Web
|
|||
|
||||
/// <summary>
|
||||
/// Appends a frame representing an instruction to stop the specified event from
|
||||
/// bubbling up beyond the current element.
|
||||
/// propagating beyond the current element.
|
||||
/// </summary>
|
||||
/// <param name="builder">The <see cref="RenderTreeBuilder"/>.</param>
|
||||
/// <param name="sequence">An integer that represents the position of the instruction in the source code.</param>
|
||||
/// <param name="eventName">The name of the event to be affected.</param>
|
||||
/// <param name="value">True if bubbling should stop bubbling here, otherwise false.</param>
|
||||
public static void AddEventStopBubblingAttribute(this RenderTreeBuilder builder, int sequence, string eventName, bool value)
|
||||
/// <param name="value">True if propagation should be stopped here, otherwise false.</param>
|
||||
public static void AddEventStopPropagationAttribute(this RenderTreeBuilder builder, int sequence, string eventName, bool value)
|
||||
{
|
||||
builder.AddAttribute(sequence, $"__internal_stopBubbling_{eventName}", value);
|
||||
builder.AddAttribute(sequence, $"__internal_stopPropagation_{eventName}", value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue