E2E scenario code for preventDefault+navigation
This commit is contained in:
parent
05c284fe26
commit
47d1ffce05
|
|
@ -39,3 +39,41 @@
|
||||||
|
|
||||||
<a href="/subdir/NotAComponent.html">Not a component</a>
|
<a href="/subdir/NotAComponent.html">Not a component</a>
|
||||||
<a href="/subdir/routeablecomponentfrompackage.html">Cannot route to me</a>
|
<a href="/subdir/routeablecomponentfrompackage.html">Cannot route to me</a>
|
||||||
|
|
||||||
|
<h2>Interactions with preventDefault</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Note that navigation actions are independent of event bubbling. Stopping click event propagation before
|
||||||
|
it reaches an <a> element does <em>not</em> stop navigation from happening. This is by design,
|
||||||
|
because the same is true natively in JavaScript. Navigation only responds to preventDefault.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p __internal_preventDefault_onclick="@ancestorPreventDefault">
|
||||||
|
<a href="about:blank" __internal_preventDefault_onclick="@targetPreventDefault">
|
||||||
|
External navigation
|
||||||
|
<span __internal_preventDefault_onclick="@descendantPreventDefault">[Descendant element]</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p __internal_preventDefault_onclick="@ancestorPreventDefault">
|
||||||
|
<a href="Other" __internal_preventDefault_onclick="@targetPreventDefault">
|
||||||
|
Internal navigation
|
||||||
|
<span __internal_preventDefault_onclick="@descendantPreventDefault">[Descendant element]</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<fieldset class="prevent-default">
|
||||||
|
<legend>Prevent default on...</legend>
|
||||||
|
<label><input class="ancestor" type="checkbox" @bind="ancestorPreventDefault" /> Ancestor</label>
|
||||||
|
<label><input class="target" type="checkbox" @bind="targetPreventDefault" /> Target</label>
|
||||||
|
<label><input class="descendant" type="checkbox" @bind="descendantPreventDefault" /> Descendant</label>
|
||||||
|
|
||||||
|
@* So we can assert that navigation didn't happen *@
|
||||||
|
<button class="counter" @onclick="@(() => counter++)">Counter: @counter</button>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
@code {
|
||||||
|
bool ancestorPreventDefault;
|
||||||
|
bool targetPreventDefault;
|
||||||
|
bool descendantPreventDefault;
|
||||||
|
int counter;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue