huahaofeng
/
aspnetcore
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Move navigation preventDefault tests to their own page

This commit is contained in:
Steve Sanderson 2019-09-27 12:46:34 +01:00 committed by Artak
parent 62f596c2bd
commit 6f8b31bdb1
2 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/Components/test/testassets/BasicTestApp/RouterTest/Links.razor
View File

@ -20,6 +20,7 @@
<li><NavLink href="/subdir/WithParameters/Name/Abc/LastName/McDef">With more parameters</NavLink></li> <li><NavLink href="/subdir/WithParameters/Name/Abc/LastName/McDef">With more parameters</NavLink></li>
<li><NavLink href="/subdir/LongPage1">Long page 1</NavLink></li> <li><NavLink href="/subdir/LongPage1">Long page 1</NavLink></li>
<li><NavLink href="/subdir/LongPage2">Long page 2</NavLink></li> <li><NavLink href="/subdir/LongPage2">Long page 2</NavLink></li>
<li><NavLink href="PreventDefaultCases">preventDefault cases</NavLink></li>
<li><NavLink>Null href never matches</NavLink></li> <li><NavLink>Null href never matches</NavLink></li>
</ul> </ul>
@ -39,41 +40,3 @@
<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 &lt;a&gt; 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;
}

39
src/Components/test/testassets/BasicTestApp/RouterTest/PreventDefaultCases.razor Normal file
View File

@ -0,0 +1,39 @@
@page "/PreventDefaultCases"
<h2>Interactions with preventDefault</h2>
<p>
Note that navigation actions are independent of event bubbling. Stopping click event propagation before
it reaches an &lt;a&gt; 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;
}