Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AddEventListener() preempting a:active in FF

    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 anchorseudo element ordering problem.

    Thanks so much,

    John

    Html =======================
    Code:
    <!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 ========================

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

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

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

    ...
    Code:
    // 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;
    	}
    }
    ...

  • #2
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •