Solved

js; event cascading; onmousedown etc

Posted on 2003-11-05
8
463 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

707 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now