Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Browser default actions#378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
Show all changes
13 commits
Select commitHold shift + click to select a range
243a87c
Browser default actions
omero329Sep 11, 2020
c17b5f6
Update 2-ui/2-events/04-default-browser-action/article.md
omero329Sep 11, 2020
91cf14a
Update 2-ui/2-events/04-default-browser-action/article.md
omero329Sep 11, 2020
41f89c1
'Entonces','de inmediato'
omero329Sep 11, 2020
9389b69
Update 2-ui/2-events/04-default-browser-action/1-why-return-false-fai…
omero329Sep 11, 2020
52bdeda
Update 2-ui/2-events/04-default-browser-action/2-catch-link-navigatio…
omero329Sep 11, 2020
febee0a
Update 2-ui/2-events/04-default-browser-action/3-image-gallery/source…
omero329Sep 11, 2020
9bd14bd
Merge branch 'Browser-default-actions' of https://github.com/homero30…
omero329Sep 11, 2020
b79e278
Update 2-ui/2-events/04-default-browser-action/article.md
omero329Sep 12, 2020
f074459
Update 2-ui/2-events/04-default-browser-action/2-catch-link-navigatio…
omero329Sep 12, 2020
b18160b
Update 2-ui/2-events/04-default-browser-action/article.md
omero329Sep 12, 2020
95bda95
Update 2-ui/2-events/04-default-browser-action/article.md
omero329Sep 12, 2020
ae338c5
Update 2-ui/2-events/04-default-browser-action/article.md
omero329Sep 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
When the browser reads the`on*`attribute like`onclick`,it creates the handler from its content.
Cuando el navegador lee un atributo`on*`como`onclick`,crea el controlador a partir de su contenido.

For `onclick="handler()"`the function will be:
Para `onclick="handler()"`la función será:

```js
function(event) {
handler() //the content of onclick
handler() //el contenido de onclick
}
```

Now we can see that the value returned by`handler()`is not used and does not affect the result.
Ahora podemos ver que el valor devuelto por`handler()`no se usa y no afecta el resultado.

The fix is simple:
La solución es simple:

```html run
<script>
Expand All@@ -23,7 +23,7 @@ The fix is simple:
<a href="https://w3.org" onclick="*!*return handler()*/!*">w3.org</a>
```

Also we can use`event.preventDefault()`,like this:
También podemos usar`event.preventDefault()`,así:

```html run
<script>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,9 +2,9 @@ importance: 3

---

#Why"return false"doesn't work?
#¿Por qué"return false"no funciona?

Why in the code below`return false`doesn't work at all?
¿Por qué en el código de abajo`return false`no funciona en absoluto?

```html autorun run
<script>
Expand All@@ -14,9 +14,9 @@ Why in the code below `return false` doesn't work at all?
}
</script>

<a href="https://w3.org" onclick="handler()">the browser will go to w3.org</a>
<a href="https://w3.org" onclick="handler()">el navegador irá a w3.org</a>
```

The browser follows the URLon click, but we don't want it.
El navegador sigue la URLal hacer clic, pero no la queremos.

How to fix?
¿Como se arregla?
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
That's a great use of the event delegation pattern.
Ese es un gran uso para el patrón de delegación de eventos.

Inreal life instead of asking we can send a"logging"request to the server that saves the information about where the visitor left. Or we can load the content and show it right in the page (if allowable).
En la vidareal, en lugar de preguntar, podemos enviar una solicitud de"logging"al servidor que guarda la información sobre dónde se fue el visitante. O podemos cargar el contenido y mostrarlo directamente en la página (si está permitido).

All we need is to catch the `contents.onclick`and use `confirm`to ask the user. A good ideawould be to use`link.getAttribute('href')`instead of`link.href`for the URL.See the solution for details.
Todo lo que necesitamos es capturar el `contents.onclick`y usar `confirm`para preguntar al usuario. Una buena ideasería usar`link.getAttribute('href')`en lugar de`link.href`para la URL.Consulte la solución para obtener más detalles.
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,15 +16,15 @@
<fieldset id="contents">
<legend>#contents</legend>
<p>
How about to read <a href="https://wikipedia.org">Wikipedia</a>or visit <a href="https://w3.org"><i>W3.org</i></a>and learn about modern standards?
¿Que tal si leemos <a href="https://wikipedia.org">Wikipedia</a>o visitamos <a href="https://w3.org"><i>W3.org</i></a>y aprendemos sobre los estándares modernos?
</p>
</fieldset>

<script>
contents.onclick = function(event) {

function handleLink(href) {
let isLeaving = confirm(`Leave for ${href}?`);
let isLeaving = confirm(`¿Irse a ${href}?`);
if (!isLeaving) return false;
}

Expand Down
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,7 +16,7 @@
<fieldset id="contents">
<legend>#contents</legend>
<p>
How about to read <a href="https://wikipedia.org">Wikipedia</a>or visit <a href="https://w3.org"><i>W3.org</i></a>and learn about modern standards?
¿Que tal si leemos <a href="https://wikipedia.org">Wikipedia</a>o visitamos <a href="https://w3.org"><i>W3.org</i></a>y aprendemos sobre los estándares modernos?
</p>
</fieldset>

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,15 +2,15 @@ importance: 5

---

#Catch links in the element
#Captura enlaces en el elemento

Make all links inside the element with`id="contents"`ask the user if they really want to leave. And if they don't then don't follow.
Haz que todos los enlaces dentro del elemento con`id="contents"`pregunten al usuario si realmente quiere irse. Y si no quiere, no sigas.

Like this:
Así:

[iframe height=100 border=1 src="solution"]

Details:
Detalles:

- HTMLinside the element may be loaded or regenerated dynamically at any time, so we can't find all links and put handlers on them. Use event delegation.
-The content may have nested tags. Inside links too, like `<a href=".."><i>...</i></a>`.
-ElHTMLdentro del elemento puede cargarse o regenerarse dinámicamente en cualquier momento, por lo que no podemos encontrar todos los enlaces y ponerles controladores. Utilice la delegación de eventos.
-El contenido puede tener etiquetas anidadas. Dentro de los enlaces también, como `<a href=".."><i>...</i></a>`.
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
The solution is to assign the handler to the container and track clicks. If a click is on the `<a>` link, then change`src`of `#largeImg`to the `href`of the thumbnail.
La solución es asignar el controlador al contenedor y realizar un seguimiento de los clics. Si haces clic en el enlace `<a>`, cambias`src`de `#largeImg`por el `href`de la miniatura.
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,24 +9,24 @@

<body>

<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<p><img id="largeImg" src="https://es.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>

<ul id="thumbs">
<!-- the browser shows a small built-in tooltip on hover with the text from "title" attribute -->
<li>
<a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://es.js.cx/gallery/img2-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://es.js.cx/gallery/img3-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://es.js.cx/gallery/img4-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://es.js.cx/gallery/img5-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://es.js.cx/gallery/img6-thumb.jpg"></a>
</li>
</ul>

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,24 +9,24 @@

<body>

<p><img id="largeImg" src="https://en.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<p><img id="largeImg" src="https://es.js.cx/gallery/img1-lg.jpg" alt="Large image"></p>

<ul id="thumbs">
<!--the browser shows a small built-in tooltip on hover with the text from "title"attribute -->
<!--el navegador muestra un tooltip (ya viene integrado) con el texto del atributo "title"al pasar el ratón sobre él -->
<li>
<a href="https://en.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://en.js.cx/gallery/img2-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://es.js.cx/gallery/img2-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://en.js.cx/gallery/img3-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://es.js.cx/gallery/img3-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://en.js.cx/gallery/img4-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://es.js.cx/gallery/img4-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://en.js.cx/gallery/img5-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://es.js.cx/gallery/img5-thumb.jpg"></a>
</li>
<li>
<a href="https://en.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://en.js.cx/gallery/img6-thumb.jpg"></a>
<a href="https://es.js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://es.js.cx/gallery/img6-thumb.jpg"></a>
</li>
</ul>

Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,12 +2,12 @@ importance: 5

---

#Image gallery
#Galería de imágenes

Create an image gallery where the main image changes by the click on a thumbnail.
Crea una galería de imágenes donde la imagen principal cambia al hacer clic en una miniatura.

Like this:
Así:

[iframe src="solution" height=600]

P.S. Use event delegation.
P.D. Utiliza la delegación de eventos.
Loading
[8]ページ先頭
©2009-2025 Movatter.jp