PDA

View Full Version : mouseover and mousedown events not "bubbling"


AaronCampbell
01-11-2006, 03:17 PM
Well, first the example: http://ezdispatch.com/order2.php?u=demo&p=demo
If you start typing in the first input box (should take focus, but it's "Name of Location:" in the "Pickup Location:" section) you should get a div that appears with a list of "suggestions" (customers that match what you have typed). You should be able to navigate up/down the list with the arrow keys, or the mouse. The mouse is the problem.
The format of the suggestions looks like this:
<div class=suggestions>{<div class=opt><div class=left></div><div class=right></div></div>}</div>
(everything between the { & } is repeated for each option.)

The mouse handlers are attached to the .suggestions div. The problem is..if you run the mouse up the middle of the suggestions (the white space between the words), it works fine. This should be like running your mouse over the .opt divs. BUT...if you run the mouse over the words, it doesn't work. You can't click on the words, etc.

Any ideas? I've put all the code in that one file...hopefully that will help.

AaronCampbell
01-11-2006, 05:20 PM
Well, I found a solutionto the mouseover part, and now I'm wondering WHY it works...
The mousedown still doesn't work over the text.
Original Code (http://ezdispatch.com/order2.php?u=demo&p=demo):
AutoSuggestControl.prototype.highlightSuggestion = function (oSuggestionNode) {
for (var i=0; i < this.layer.childNodes.length; i++) {
var oNode = this.layer.childNodes[i];
if (oNode == oSuggestionNode) {
oNode.className = "opt_sel"
} else {
oNode.className = "opt";
}
}
};Working Code(http://ezdispatch.com/order3.php?u=demo&p=demo):AutoSuggestControl.prototype.highlightSuggestion = function (oSuggestionNode) {
var optDiv = oSuggestionNode;
while(optDiv && optDiv.className.indexOf("opt")){
optDiv = optDiv.parentNode;
}
if(optDiv && optDiv.className.indexOf("opt")==0){
if(this.lastOpt) this.lastOpt.className = "opt";
optDiv.className = "opt_sel";
this.lastOpt = optDiv;
}
};