(Nota del traductor: este artículo resuelve el problema de usar JS para abrir una nueva página al presionar la tecla CTRL)
En la especificación HTML5 simplificada, se permite que se incluyan múltiples DIV y/u otros elementos de nivel de bloque en la etiqueta A. Ahora, solo envuelva los elementos de bloque con la etiqueta <a>, puede resolver el problema que originalmente necesitaba escuchar con JavaScript y llamar a la ventana. Localización para lograr la función de redirección de la página.
Sin embargo, este formulario de envoltura usando la etiqueta <a> tampoco funciona bien; por ejemplo, hay algunas etiquetas <a> en un elemento de bloque. En este caso, solo queremos saltar a una dirección determinada al hacer clic en otras partes que no sean <a> en el padre.
Por supuesto, usar un oyente simple como lo siguiente también puede lograr nuestras necesidades:
La copia del código es la siguiente:
SomeEllement.AdDeventListener ('Click', function (E) {
// Cualquier dirección de URL está bien, o puede usar otro código para especificarlo.
// Aquí está el atributo DOM `data-SRC` de este elemento (atributo)
window.location = someElement.get ('data-url');
});
... Pero esto a veces tiene una mala experiencia de usuario. Cuando mantiene presionado la tecla CTRL (Mac es la tecla de comando) y haga clic con el mouse, abrirá el enlace en la misma ventana (Tab). Sabiendo que existe este problema, debe haber pensado en cómo resolverlo. Podemos lograr esto modificando un pequeño código. Tómese un tiempo para arreglar su oyente:
La copia del código es la siguiente:
SomeEllement.AdDeventListener ('Click', function (E) {
// Obtener URL
var url = someElement.get ('data-url');
// Determinar si se ha presionado la tecla CTRL
if (e.metakey || e.ctrlkey || e.button === 1) {
Window.open (URL);
} demás {
Window.location = url;
}
});
El autor original ha implementado esta función en el sitio web http://davidwalsh.name/, y debe recordar esto cuando se usa ventana. Ubicación para la redirección de la página. Esta es una pequeña mejora del código, ¡pero es muy importante mejorar la usabilidad!