JulioGreff.net » dom

Firefox, Event Listeners e Return

Julio Greff — Thu, 07 Feb 2008 20:39:47 +0000

Quem já não perdeu alguns fios de cabelo usando return false em um Event Listener no Firefox? Por mais que se tente, o evento continua com seu comportamento padrão. Nesse post vou mostrar a “grande” solução.

De acordo com a especificação do ECMAScript, Event Listeners (definidos através da famosa addEvent, para execvent, para executar funções no disparo de eventos) não possuem valores de retorno, ou seja, return false não faz efeito algum (pelo menos no Firefox, que segue esse padrão).

A solução é simples: a função não possui valor de retorno, mas recebe como parâmetro um objeto Event. Através dele, podemos usar Event.preventDefault para impedir que o comportamento padrão seja executado. Veja o código:

addEvent(myForm, "submit", function(e) {
		if(e && e.preventDefault) e.preventDefault();
		else return false; // JavaScript à moda IE
	})

Simples, não? Espero que possa ajudar, já que também tive esse pequeno problema. Até o próximo post!

Posts Relacionados

Drag and Drop – Parte 2

Julio Greff — Thu, 08 Mar 2007 22:08:36 +0000

Esse post é continuação de Drag and Drop – Parte 1.

Nessa segunda parte sobre Drag and Drop, vou explicar como “soltar” os objetos, como prometido no post anterior. Ficou curioso? Então vamos ao trabalho.

Antes de começar, vamos tomar como exemplo uma lixeira: devemos carregar itens para dentro dela. Simples, não acha? Pois é, se você respondeu “sim”, ledo engano.
Como estamos carregando um item, ele ess carregando um item, ele está sempre diretamente abaixo do ponteiro do mouse. Desse modo, é impossível disparar um evento de mouse (mouseup, mousedown, mouseover…) em qualquer elemento da página. Se você carregar um item para uma lixeira, o mouse ainda estará acima do elemento, e não da lixeira.
Existem algumas maneiras para resolver o problema, muito fáceis até. O problema da maioria delas é o mesmo: estética. Não mover o elemento até que o mouse seja soltado, colocar o elemento logo abaixo do ponteiro, entre outras coisas não muito bonitas de se ver.
Mas pra tudo existe uma solução. Difícil, mas é uma boa solução. O plano é o seguinte: vamos criar uma lista de todos os alvos. Não vamos atirar em ninguém, esses alvos serão os lugares onde os itens podem ser largados. Quando o botão do roedor eletrônico for soltado, checaremos a posição do mouse e a posição de cada alvo, para sabermos se o ponteiro está em cima de algum desses alvos.
Vamos ao código:

/*
Ainda precisamos de todo o código dos exemplos anteriores,
com exceção da função mouseUp (substituída agora)
*/

var dropTargets = [];

function addDropTarget(dropTarget){
	dropTargets.push(dropTarget);
}

function mouseUp(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);

	for(var i=0; i < dropTargets.length; i++){
		var curTarget  = dropTargets[i];
		var targPos    = getPosition(curTarget);
		var targWidth  = parseInt(curTarget.offsetWidth);
		var targHeight = parseInt(curTarget.offsetHeight);

		if(
			(mousePos.x > targPos.x)                &&
			(mousePos.x < (targPos.x + targWidth))  &&
			(mousePos.y > targPos.y)                &&
			(mousePos.y < (targPos.y + targHeight))){
// Aqui executamos a ação desejada.
		}
	}

	dragObject   = null;
}

Usamos assim: definimos um alvo com a função addDropTarget, assim como makeDraggable de antes. Quando soltamos o mouse, a função mouseUp checa a posição de cada alvo e a posição do mouse, e então executa a ação que precisamos.
Tudo OK, tudo prontinho. É claro que o resto é criatividade: containers, organização de dados, alguma coisa pra ser carregada pela sua página, ou qualquer outra bugiganga sem muita utilidade. Até!

Este texto é uma versão do original, How to Drag and Drop in JavaScript.

Posts Relacionados

Drag and Drop – Parte 1

Julio Greff — Tue, 06 Mar 2007 21:43:00 +0000

“Drag and Drop” é aquele conhecido efeito de arrastar e soltar, comum em muitos serviços que encontramos na Internet hoje em dia, e acredito que você já tenha se deparado com muitos desses serviços.
Dividi este tutorial em duas partes, pra não ficar muito cansativo. Nessa primeira parte, vou explicar o básico, como “arrastar”. Na outra, vamos aprender a “soltar” (parece meio óbvio, mas vai ser útil, aguarde).

Capturando Movimentos do Mouse

A primeira coisa que devemos fazer é capturar as coordenadas do mouse quando ele se move. Isso é feito adicionando uma função ao evento document.onmousemove.

document.onmousemove = mouseMove;// Essa não é a melhor maneira de fazer isso// Quando for "de verdade", use addEventfunction mouseMove(ev){        ev           = ev || window.event;        var mousePos = mouseCoords(ev);}function mouseCoords(ev){        if(ev.pageX || ev.pageY){                return {x:ev.pageX, y:ev.pageY};        }        return {                x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,                y:ev.clientY + document.body.scrollTop  - document.body.clientTop        };}

Primeiro vamos ao evento. Praticamente tudo que fizemos quando estamos em uma página dispara um evento (um clique, um movimento de mouse, uma tecla pressionada…). No IE, esse evento é global, e fica na variável window.event. Nos browsers de verdade (Firefox, Opera, Safari…), esse evento é passado como argumento para a função que está vinculada a ação.
Sempre diferente, o IE dá um jeito de atrapalhar. Nos browsers (Firefox, Opera, Safari…, IE não é browser), event.pageX e event.pageY representam a posição do mouse em relação ao documento, onde o topo esquerdo é a posição 0×0. Se você rolar a página 100 pixels abaixo, pageY será 100, e assim por diante.
Já se você clicar num ícone com um “E” azul e for testar, a posição do mouse em relação a janela estará armazenada em event.clientX e event.clientY. Assim sendo, mesmo se você rolar a página (e manter o mouse no lugar), a posição será sempre 0×0 (já que a posição é em relação a janela, e não ao documento inteiro). As variáveis scrollTop e scrollLeft nos ajudam a resolver o problema, já que elas armazenam a “quantidade” rolada. Piorando um pouco a situação (e aumentando mais um termo em nossa expressão algébrica “made-for-ie”), o documento não fica na posição 0×0, há uma pequena borda ao redor. document.body.clientLeft e document.body.clientTop contém a largura dessa borda.
Pra não nos preocuparmos com isso, o dito cujo criador da função (que permanece desconhecido pra mim) deixou tudo pronto. Em todos os exemplos, suprimirei essa função, mas ela deve estar lá sempre!

Capturando Cliques do Mouse

Agora precisamos saber quando o botão do mouse é pressionado e quando ele é soltado. Novamente usamos os eventos, agora onmousedown e onmouseup. Note que eles não devem ser vinculados ao documento, e sim ao objeto que queremos arrastar. Assim só eles poderão ser arrastados, e não o documento.

document.onmouseup = mouseUp;var dragObject     = null;

function makeClickable(object){        object.onmousedown = function(){                dragObject = this;        }}

function mouseUp(ev){        dragObject = null;}

A variável dragObject conterá o objeto que está sendo carregado. Se o objeto for “arrastável”, e clicarmos nele, ele vai pra essa variável. Caso contrário, ela permanece nula. E quando soltamos o botão do mouse, idem. E para tornar um objeto possível de se arrastar (“arrastável”, não sei se isso existe), usamos a função makeClickable, passando o dito objeto como parâmetro.

Movendo um Objeto

Agora na reta final. Primeiro, para podermos arrastar um objeto, precisamos que o estilo position seja absolute, obviamente porque a sua posição é relativa ao topo esquerdo do documento, assim como a posição do mouse.
Uma vez que objeto.style.position = "absolute", tudo que temos que fazer é mudar os estilos top e left. So, voila! Só falta saber como fazer isso:

document.onmousemove = mouseMove;document.onmouseup   = mouseUp;

var dragObject  = null;var mouseOffset = null;

function mouseMove(ev){        ev           = ev || window.event;        var mousePos = mouseCoords(ev);}

// mouseCoords(ev)...

function getMouseOffset(target, ev){        ev = ev || window.event;

     var docPos    = getPosition(target);        var mousePos  = mouseCoords(ev);        return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};}

function getPosition(e){        var left = 0;        var top  = 0;

     while (e.offsetParent){                left += e.offsetLeft;                top  += e.offsetTop;                e     = e.offsetParent;        }

     left += e.offsetLeft;        top  += e.offsetTop;

     return {x:left, y:top};}

function mouseMove(ev){        ev           = ev || window.event;        var mousePos = mouseCoords(ev);

     if(dragObject){                dragObject.style.position = 'absolute';                dragObject.style.top      = mousePos.y - mouseOffset.y;                dragObject.style.left     = mousePos.x - mouseOffset.x;

             return false;        }}function mouseUp(){        dragObject = null;}

function makeDraggable(item){        if(!item) return;        item.onmousedown = function(ev){                dragObject  = this;                mouseOffset = getMouseOffset(this, ev);                return false;        }}

Esse “juntão” de códigos (e alguns a mais) nos permite mover livremente um objeto (desde que seja “arrastável” (preciso de um substituto pra essa palavra), através de makeDraggable).
Algo mais que possa interessar: quando clicamos em um item (item = objeto “arrastável”, ufa), guardamos outra variável: mouseOffset. Ela contém o lugar em que clicamos em nosso item. Isso para que possamos posicionar o item abaixo do mouse da mesma maneira quando clicado.
Outra função diferente que usamos: getPosition. Ela retorna a posição de um item relativo ao documento. Como seu offsetLeft e offsetTop são relativos ao seu elemento pai, a função vai somando até chegar ao documento.

Soltando um Objeto

Até agora cumprimos tudo, carregamos o item para qualquer lugar da página. Mas podemos fazer mais que isso, como encaixar o item em um lugar específico, ou carrega-lo para uma lixeira, pasta…

Isso é legal, concorda? E tenho um segredo pra contar: só na parte 2, até!

Não esqueça de ler a parte 2 do artigo!

Posts Relacionados

Estendendo Objetos DOM

Julio Greff — Sun, 18 Feb 2007 21:35:00 +0000

Estender objetos DOM vem sendo um problema desde que IE é browser (ou quase isso, IE não é um browser, pode ser usado até como torradeira (?), mas browser não).
Como o bichinho azul não nos deixa estender Object ou Element (não me pergunte o porquê), nos vemos em um grande problema, que muitos desenvolvedores já tentaram resolver. Um dos mais bem-sucedidos nisso (dos que conheço) foi o Bermonruf, nesse post. Ele usa uma maneira criativa de estender os objetos DOM. Não tão eficiente quanto estender a raíz dos objetos (maldito IE!), mas funciona impressionantemente bem, devido as restrições a nós, pobres mortais, impostas. O post explica melhor a idéia do que eu.
Eu, perfeccionista não satisfeito, continuei atrás de uma maneira “elegante”, como diz o Bernardo. Não encontrei, mas encontrei uma maneira diferente, e que se aplica melhor ao meu estilo de desenvolvimento (me ajudou muito, não só com o DOM). Baseia-se em Extending DOM Nodes with Mootools, de Cory Hudson. Como não sou bom pra re-explicar soluções dos outros, leia lá.

Fuçando na Mootools

Como estou desenvolvendo uma biblioteca, não quero que seja necessário outras para fazê-la funcionar. Então fui fuçar na Mootools. Achei a “solução” para nosso “problema”. Vamos criar algumas funções daqui a pouco, baseadas em Object.extend, Element.extend e $. É tudo que iremos precisar para estender nossos objetos.
Utilizaremos a mesma idéia do Bernardo (estender objeto por objeto), mas de uma maneira diferente (apenas os elementos retornados pela função $ serão estendidos).

As Funções para Estender

As funções que apresentarei a vocês vêm diretamente da minha biblioteca. Elas tem algumas pequenas modificações que julguei necessárias, mas são praticamente a mesma coisa.

Object.extend = function(objDestination, objSource) {  if(typeof objSource == "undefined") {    objSource = objDestination;    objDestination = this;  }  for(var property in objSource)    objDestination[property] = objSource[property];  return objDestination;}Element.extend = function(objSource) {  return Object.extend(Element.prototype, objSource);}

Antes de Element.extend, precisamos definir a função Element, também da minha biblioteca, também baseada na Mootools.

var Element = function(mElement) {  if(typeof mElement == "string")    mElement = document.createElement(mElement);  return $(mElement);}

Quase tudo que precisamos está aí. Agora falta a função $, que retornará nossos objetos DOM já estendidos.

A função pra objeto e$tendido

Como já disse, apenas os objetos retornados por $ serão e$tendidos. Essa função retornará o objeto estendido com tudo que estiver no protótipo (prototype) da “classe” Element. Mais simples: todos os métodos da “classe” Element estarão em todos os objetos retornados por $. Como? Vamos codificar:

// Adaptado da Mootoolsvar $ = function(el) {        el = document.getElementById(el);        el.extend = Object.extend;        el.extend(Element.prototype);        return el;}

Pronto, aí está! That’s all folks! Peraí, ainda não. Não vão embora ainda, temos que estender Element ainda! Lembre-se, tudo que estiver em Element está nos objetos retornados em $.

Estendendo Element

Caramba, postagem concisa essa, não? Estende isso, aquilo… Vou deixar que o código abaixo se auto-explique:

Element.extend({  "metodo": function() { alert(this.innerHTML); },  "bold": function() { this.style.fontWeight = "bold"; }}

Estendemos (quase) tudo. Cada par desses aí resultará em um método (nesse caso, 2 pares, 2 métodos). Colocamos dois métodos no prototype de Element, e eles irão parar nos nossos objetos DOM.

Reaproveitando isso tudo

Um dos grandes méritos da POO é que podemos reutilizar tudo. Usando Object.extend, você pode estender qualquer objeto: strings, arrays, objetos DOM individuais, qualquer coisa. Basta chamar a função com dois argumentos: objDestination (objeto de destino) e objSource (métodos ou propriedades a serem adicionados, no formato JSON).
Espero que eu tenha sido claro, e utilizem bem!

Posts Relacionados

XML Sem Ajax

Julio Greff — Fri, 09 Feb 2007 20:15:36 +0000

Ando meio relapso aqui no blog. A explicação é o jsFrameWorX, estou trabalhando direto com ele (a propósito, mudei a “documentação” para fora do script). O que escreverei hoje será a próxima função do bichinho.

Quem usa Ajax vai achar isso aqui loucura, quem sempre sonhou com XML direto no JavaScript vai ficar admirado (e não falo de E4X). Usaremos uma simples função chamada loadXMLDoc (achei na Internet, não sei o autor).

function loadXMLDoc(dname){var xmlDoc;// code for IE

if (window.ActiveXObject)

{

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}

// code for Mozilla, Firefox, Opera, etc.

else if (document.implementation && document.implementation.createDocument)

{

xmlDoc=document.implementation.createDocument("","",null);

}

else

{

alert('Your browser cannot handle this script');

}

xmlDoc.async=false;

xmlDoc.load(dname);

return(xmlDoc);

}

Esta acima é a gloriosa função. Ela não manterá a mesma forma no jsFrameWorX, e adicionarei algumas características. Assim como o responseXML do XmlHttpRequest, temos a disposição qualquer método DOM do XML. O que mais usaremos provavelmente será getElementsByTagName e getElementById, mas não vem ao caso.

Podemos usar tanto XML estático quanto dinâmico. Como? Lembra-se do Ajax sem o X? Usamos o mesmo princípio, passando query strings para um script no lado do servidor, ou mesmo sem query strings, mas com dados já coletados e guardados em algum lugar.

loadXMLDoc("xml_dinamico.php?qs=xml_dinamico");

Aí você pode trabalhar com XML como se estivesse dentro do script, sem precisar usar Ajax (ou o XMLHttpRequest), apesar de podermos fazer requisições síncronas e assíncronas. Esse XML pode ser usado de diversas maneiras: criar um gráfico, importar informações para uma aplicação, e, talvez no futuro, importar SVG direto no HTML.

Quem estiver interessado em XML DOM, visite o W3Schools. Quem ainda não conhece o site, visite, tem ótimos tutoriais sobre tudo que você imaginar (e um pouco mais).

Posts Relacionados

24 Ways

Julio Greff — Tue, 05 Dec 2006 23:17:08 +0000

O 24 Ways está de volta. Desde o dia 1º até o dia 24 de dezembro, serão apresentados vários artigos “muito dos interessante”, escritos por grandes gurus da web.

Dentre esses gurus, temos: Inman, Hicks, Collison, Johansson, Molly além do próprio McLellan, criador do site.

Alguns dos temas abordados: CSS, DOM scripting, acessibilidade, microformats dentre outros. Ahh! Também estão disponíveis os artigos do ano passado: 24 Ways 2005.

Espalhe a notícia! Fonte: Revolução Etc