Solved

js; event cascading; onmousedown etc

Posted on 2003-11-05
8
497 Views
Last Modified: 2008-02-01
hi peoples,
Another question that doesn't exist according to the books.
This is one problem expressed in two fashions.

Mouse events are happening twice, how to I make the first hook eat the event?
specifically:
[[1]]
<a href="./somewhere.html" onmousedown="goSomeWhere();" ... >Go somewhere</a>

where goSomeWhere() is a wrapper function, that moves the window to ./somewhere.html, and does some user interface thingies.   The goSomeWhere() *has* to do the page move, as it applies the changes to the newly loaded page.
The plain href is required for people with Javascript disabled.

[[2]]
<span id="span1" onmousedown="anotherWrapper('a1');" ... > <a id="a1" onmousedown="goSomeWhere();"> ...

It is claimed that many users lack accuracy with mice, so I put the spans round the links to increase the target area, for them to hit.   My pages are automatically generated, and anotherWrapper() is a utility function that works out what the inner elements are, and invokes them.   If the inner element has a onmousedown hook, it runs it; if there is a href is jumps down it.
The problem is, if you click on the link both goSomeWhere() and anotherWrapper() are called.

potentail solutions:
for 1: goSomeWhere deletes the href attribute, but this seems dangerous.
         I just tried making onmousedown hook into onclick, but this crashes moz

for 2: add a variable, to act as a mutex, so only one function happens.

There must be a better way of doing this.   Both the functions return true, which is supposed to suppress further activity, but it ain't.

this is some what long post
Owen

0
Comment
Question by:DeeperDarker
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 11

Expert Comment

by:Zontar
ID: 9692411
Two comments.

1. Why not just just make the links bigger with CSS? You can increase their size and/or margins and/or padding just like you can with any other element.

2. Trapping onmousedown as opposed to onclick would annoy the hell out of me if I were using your site.

You might want to look at attachEvent() and addEventListener() and how to cancel event-bubbling once an event's been noticed.

0
 
LVL 1

Author Comment

by:DeeperDarker
ID: 9694074
Z: 2. Trapping onmousedown as opposed to onclick would annoy the hell out of me if I were using your site.

how could you tell?
unless you tried drag-click.
0
 
LVL 3

Expert Comment

by:makc
ID: 9696517
>> Mouse events are happening twice, how to I make the first hook eat the event?
event.cancelBubble = true or something, I guess
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:Zontar
ID: 9697014
> unless you tried drag-click.

Exactly! I make frequent use of Mozilla's ability to drag a link to the tabbar in order to open a link in a new tab. This would also interfere with users wishing to right-click/ctrl-click/click-hold to get a context menu for opening the link in a new browser window or other legitimate pruposes.
0
 
LVL 1

Author Comment

by:DeeperDarker
ID: 9709915
I rebuilt the pages with the larger anchor element (with CSS), as Zontar's  suggestion.
This cancels point 2.

The onmousedown is random paranoia, about wanting my code to run before whatever the browser does by default.
During the rebuild I moved the onmousedown to onclick

makC: [event.cancelBubble = true] what browsers support this?   I'm posting this to you (rather than reading), as the different browsers have different event models.  

Does anyone know whether onclick will suppress the traditional href on an anchor?   (I mean in a reliable consistent fashion)
0
 
LVL 11

Accepted Solution

by:
Zontar earned 125 total points
ID: 9710133
You could use some JavaScript to rewrite the href atttributes:

<script type="text/javascript">
window.onload = rewriteHrefs;

function rewriteHrefs()
{
  for(var i = 0; i < document.links.length; i++)
  {
    document.links[i].href = "javascript:goSomewheret(\"" + document.links[i].href + "\");";
  }
}
</script>

I pulled a similar stunt a couple of years ago... you wouldn't even need the onclick handlers, perhaps?

If you only want to rewrite certain links, give them a class attribute and test document.links[i].className.
0
 
LVL 1

Author Comment

by:DeeperDarker
ID: 9710514
Actually its just one link, that flips between different indexes.

In opera the "open in new window" gesture works in conjunction to onclick
doesn't Moz have this level of thoroughness?

will apply this.
points for you Zontar ;-)
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9710680
You can get a mouse-gestures add-on for Moz, but I could never warm to them in Opera, so I've not tried it. Could be the fault of our cats bumping my elbow all the time.

Ta. :)
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

689 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question