how to prevent a div to intercept onclick?

[hariseldon78]

Hello guys. I hope this has not been covered in the past, I tried to search a bit..

I am writing a memory game in javascript: you click on a card and it turns showing the other face of the card. Occasionally you will get some points, and i show those points in an animated div.

This div will move over the cards and that is the problem: when it is moving over the cards he steals the onclick event and the effect is that you cannot click the cards while it is over them.

This happens even if I bind an empty function to his own onclick (function() {return false;}). The cancelBubble and stopPropagation properties don't help me because the div is not parent nor children of the cards' divs, it is just a moved indipendent div.

I'm using the jQuery library and i'm quite new to javascript and html in general..

[jscheuer1]

How big is this floating division? If it's only as big as the size of a text input or of one or two short lines of text, having a click on it not activate the card underneath's click event should be acceptable. Perhaps you just need to limit its size.

To do it in the way I think you are proposing - there may be an easier and as foolproof of a method. But failing that you would have to grab the coordinates of the the floating division's click event and correlate them with the boundaries of each of the cards. If the former falls within one of the latter, activate that card's click(). I could layout the particulars of the process in theory. Using jQuery thankfully makes this a lot easier than javascript alone would. But it would be even easier to do so if I could see the page. In fact, at that point and with a bit of work, I could probably tell you exactly how to do it. Seeing the page might also present an easier method, like making the the mousedown, mouseover or some other event of the floating div render its visibility temporarily hidden or its display temporarily none. If using its mousedown, we could perhaps then use the card's mouseup to turn the card and the document's mouseup to restore the floating division. We may even be able to use the document's mousedown and moueup alone.

If you want more help I need a link to a page that shows the problem happening (it can just be an orphan page somewhere on your site/the web, doesn't have to be linked to or from your other pages). Otherwise it could become a game of twenty questions trying to solve this for you.