...

View Full Version : AddEventListener() preempting a:active in FF



aspis
06-22-2009, 03:02 AM
Hi all,

Background =================
I am building a small web app and have included a drag and drop object from quirksmode.org. PPK, in fact, does nice work and has given the community an awesome resource.
Reference:http://www.quirksmode.org/js/dragdrop.html

My app uses a sprite based minimum/maximize button that has a down state fx triggered by a:active (CSS). The drag and drop code sets event listeners on the following: document, #floatdiv (the app wrappper div) and all contained elements therein.

After addition of the drag and drop code, the fx is no longer working in FF 2.x, 3.x. All other links using a:active are also affected. i.e. min/max function calls (not included here) are still working. Just the sprites down state is missing. In the case of regular links, the active state style is missing.

All code still works in IE, even IE6 with a strict 4.0 html doc type! Considering that IE is using attachEvent() instead of AddEventListener(), I think that a:active is being preempted by the AddEventListener()somehow?

I believe I could use javascript to workaround this but I don't think it's a good practice to write event code just to do link styling etc. I cannot find any info on the net regarding interactions between a:active and AddEventListener() in the various event models. I'm looking for a fix not a workaround. Also, I am not considering prototype, dojo, jquery, YUI etc.. to git er done. After all, this app is a learning exercise. Any help, info or resource pointer on this issue would be greatly appreciated.

BTW, for the quick shots..., this is not a anchor:pseudo element ordering problem.

Thanks so much,

John

Html =======================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ...

...
<div id="floatdiv">
<div id="buttons"><div id="min_max"><a href="#"></a></div></div>...

CSS ========================


#min_max a:active
{
background-image: url(min_max_s.gif);
background-position: -78px 0px;
background-repeat: no-repeat;
}

javascript =================

...

// init stuff
window.onload=function() {
heatmap.f_updateXY();
dragDrop.initElement(document.getElementById('floatdiv'));
f_addEventHandlers("min_max", "a", "onclick", f_expand, "data");
} ...

...

// event listeners
function addEventSimple(obj,evt,fn) {
if (obj.addEventListener)
obj.addEventListener(evt,fn,false);
else if (obj.attachEvent)
obj.attachEvent('on'+evt,fn);
}


function removeEventSimple(obj,evt,fn) {
if (obj.removeEventListener)
obj.removeEventListener(evt,fn,false);
else if (obj.detachEvent)
obj.detachEvent('on'+evt,fn);
}...

...

// drag and drop
dragDrop = {
keyHTML: '<a href="#" class="keyLink">#</a>',
keySpeed: 10, // pixels per keypress event
initialMouseX: undefined,
initialMouseY: undefined,
startX: undefined,
startY: undefined,
dXKeys: undefined,
dYKeys: undefined,
draggedObject: undefined,
initElement: function (element) {
if (typeof element == 'string')
element = document.getElementById(element);
element.onmousedown = dragDrop.startDragMouse;
element.innerHTML += dragDrop.keyHTML;
var links = element.getElementsByTagName('a');
var lastLink = links[links.length-1];
lastLink.relatedElement = element;
lastLink.onclick = dragDrop.startDragKeys;
},
startDragMouse: function (e) {
dragDrop.startDrag(this);
var evt = e || window.event;
dragDrop.initialMouseX = evt.clientX;
dragDrop.initialMouseY = evt.clientY;
addEventSimple(document,'mousemove',dragDrop.dragMouse);
addEventSimple(document,'mouseup',dragDrop.releaseElement);
return false;
},
startDragKeys: function () {
dragDrop.startDrag(this.relatedElement);
dragDrop.dXKeys = dragDrop.dYKeys = 0;
addEventSimple(document,'keydown',dragDrop.dragKeys);
addEventSimple(document,'keypress',dragDrop.switchKeyEvents);
this.blur();
return false;
},
startDrag: function (obj) {
if (dragDrop.draggedObject)
dragDrop.releaseElement();
dragDrop.startX = obj.offsetLeft;
dragDrop.startY = obj.offsetTop;
dragDrop.draggedObject = obj;
obj.className += ' dragged';
},
dragMouse: function (e) {
var evt = e || window.event;
var dX = evt.clientX - dragDrop.initialMouseX;
var dY = evt.clientY - dragDrop.initialMouseY;
dragDrop.setPosition(dX,dY);
return false;
},
dragKeys: function(e) {
var evt = e || window.event;
var key = evt.keyCode;
switch (key) {
case 37: // left
case 63234:
dragDrop.dXKeys -= dragDrop.keySpeed;
break;
case 38: // up
case 63232:
dragDrop.dYKeys -= dragDrop.keySpeed;
break;
case 39: // right
case 63235:
dragDrop.dXKeys += dragDrop.keySpeed;
break;
case 40: // down
case 63233:
dragDrop.dYKeys += dragDrop.keySpeed;
break;
case 13: // enter
case 27: // escape
dragDrop.releaseElement();
return false;
default:
return true;
}
dragDrop.setPosition(dragDrop.dXKeys,dragDrop.dYKeys);
if (evt.preventDefault)
evt.preventDefault();
return false;
},
setPosition: function (dx,dy) {
dragDrop.draggedObject.style.left = dragDrop.startX + dx + 'px';
dragDrop.draggedObject.style.top = dragDrop.startY + dy + 'px';
},
switchKeyEvents: function () {
// for Opera and Safari 1.3
removeEventSimple(document,'keydown',dragDrop.dragKeys);
removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
addEventSimple(document,'keypress',dragDrop.dragKeys);
},
releaseElement: function() {
removeEventSimple(document,'mousemove',dragDrop.dragMouse);
removeEventSimple(document,'mouseup',dragDrop.releaseElement);
removeEventSimple(document,'keypress',dragDrop.dragKeys);
removeEventSimple(document,'keypress',dragDrop.switchKeyEvents);
removeEventSimple(document,'keydown',dragDrop.dragKeys);
dragDrop.draggedObject.className = dragDrop.draggedObject.className.replace(/dragged/,'');
dragDrop.draggedObject = null;
}
}...

TimeHorse
07-07-2009, 04:39 PM
Try having your handlers return true instead of false. As I understand it, false means I got it, you stop bubbling this now and true means thanks but I'll let someone else handle this too. Hope that helps!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum