Bom dia. Estou seguindo um código de um livro e não estou conseguindo executar evt.preventDefault() para o hiperlink de uma imagem. Na sessão de depuração, o ponteiro do breakpoint sequer passa em cima dessa instrução e também não consigo executar link.blur(); para o elemento <a>.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Galeria de Imagens</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="princ.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="galeria_lib.js"></script>
<script type="text/javascript" src="galeria.js"></script>
</head>
<body>
<div id="conteudo">
<div id="header">
<h1>Galeria de Imagens de Livros</h1>
<p>Clique num dos links abaixo para ver a imagem.</p>
</div>
<div id="nav">
<ul id="lista_imagem">
<li><a href="img/gt1.jpg" title="guerra">A Guerra dos Tronos</a></li>
<li><a href="img/gt2.jpg" title="furia">A Fúria dos Reis</a></li>
<li><a href="img/gt3.jpg" title="tormenta">A Tormenta de Espadas</a></li>
<li><a href="img/gt4.jpg" title="festim">O Festim dos Corvos</a></li>
<li><a href="img/gt5.jpg" title="danca">A Dança dos Dragões</a></li>
</ul>
</div>
<p><img src="img/martell.jpg" alt="martell" title="martell" id="martell"></p>
<p><span id="legenda"></span><br>
</div>
</body>
</html>
princ.css
/*
Document : princ
Created on : 08/08/2013, 21:01:38
Author : eduardo
Description:
Purpose of the stylesheet follows.
*/
body {
font-family: Arial, Verdana, sans-serif;
background: #FF9730;
}
#header h1, #header p {
text-align: center;
color: #f71d1d;
}
#header p {
width: 500px;
margin: 10px auto;
}
#nav {
margin: 40px 60px;
}
#nav li {
display: inline;
margin: 0px 5px;
letter-spacing: 0.1em;
}
a:link {
color: #666633;
text-decoration: none;
}
a:visited {
color: #894910;
}
a:hover {
color: #891717;
border: 1px solid #f71d1d;
padding: 5px;
}
a:active {
color: #fff600;
border: 1px solid #fff600;
}
img[title="martell"] {
display: block;
width: 720px;
height: 400px;
margin: 50px auto;
border: 4px solid #f71d1d;
}
galeria_lib.js
var I = function(id)
{
return document.getElementById(id);
}
var T = function(nome)
{
return document.getElementsByTagName(nome);
}
var N = function(nome)
{
return document.getElementsByName(nome);
}
var GaleriaImagem = function(id_lista, id_imagem, id_legenda)
{
var that = this;
this.lista_imagem = I(id_lista);
this.elem_imagem = I(id_imagem);
this.legenda = I(id_legenda);
this.validarElem(this.lista_imagem, "*", "ID da lista");
this.validarElem(this.elem_imagem, "img", "ID da imagem");
this.validarElem(this.legenda, "span", "ID da legenda");
this.links_imagens = this.lista_imagem.getElementsByTagName("a");
if (this.links_imagens.length == 0)
{
throw new Error("Galeria de Imagem: lista não contém elementos a");
}
var i, elem, imagem;
this.cache_imagem = [];
for(i = 0; i < this.links_imagens.length; i++)
{
elem = this.links_imagens[i];
elem.onclick = function(evt)
{
var link = this;
if(!evt)
evt = window.event;
that.click_link(evt, link);
}
imagem = new Image();
imagem.src = elem.href;
this.cache_imagem.push(imagem);
}
}
GaleriaImagem.prototype.validarElem = function(elem, tag_nome, desc_elem)
{
if(!elem)
{
throw new Error("Galeria de Imagens: " + desc_elem + " não encontrado.");
}
if(elem.nodeType !== 1)
{
throw new Error("Galeria de Imagens: " + desc_elem + "Não é um id do elemento");
}
if(tag_nome !== "*" && elem.nodeName !== tag_nome.toUpperCase())
{
throw new Error("Galeria de Imagens: " + desc_elem + " não é uma " + tag_nome.toUpperCase() + " tag.");
}
}
GaleriaImagem.prototype.click_link = function(evt, link)
{
this.elem_imagem.src = link.href;
this.legenda.firstChild.nodeValue = link.title;
link.blur();
if(evt.preventDefault)
{
evt.preventDefault();
}
else {
evt.returnValue = false;
}
}
galeria.js
var galeria;
window.onload = function()
{
galeria = new GaleriaImagem("lista_imagem", "martell", "legenda");
}
