0

I register a click handler and a mouse down handler on a <div> that contains other <div>s. By default the inner <div> is set to visibility: hidden. In the mousedown handler the visibility is set to visible.

The problem is that in Safari and Firefox the click handler does not fire the first time you click on the outer <div>. In Chrome the click handler fires.

I have made a reduced test case: https://jsbin.com/hequku/edit?html,css,js,output

The interesting thing is, that if instead of manipulating the visibility attribute you manipulate the opacity attribute, the cross-browser differences go away.

What I am trying to figure out is:

  • Is this something that is expected to be different between browsers? If not, what is the spec conforming behavior?
  • Am I missing something about what one should and should not be able to do in click and mousedown handlers?
martineno
  • 2,623
  • 17
  • 14
  • Works for me in FF, make sure you fire the binding functions when the DOM is ready and the elements to attach the event handlers on are actually in the DOM when you try to bind those event handlers. – Arbel Mar 15 '16 at 01:36
  • @Arbel so for you when you use the provided example the click event fires? Can you share version/platform of Firefox that you are using? – martineno Mar 15 '16 at 02:15
  • I ran the test on FF 44.0.2/Win 8.1 – Arbel Mar 15 '16 at 03:17

2 Answers2

0

'visibility: hidden' is meant for content that 'is not yet or no more' relevant. So I guess browser won't fire click events for content that isn't relevant. Try using 'display: none' instead.

Poul Bak
  • 10,450
  • 5
  • 32
  • 57
  • Thank you for the suggestion. The reason I was using `visibility: hidden` was that I wanted the layout space to be taken up by the element. Using `display: none` will collapse the layout space, which is not ideal for my purposes. – martineno Mar 15 '16 at 02:17
0

This W3 School link talks about how visibility:hidden still takes up space if there. I ran into this before and it has something to do with how some browsers take hidden as disabled; hence, why your event won't fire. Using opacity is the work around for this.
I believe the event not firing on visibility:hidden is the correct response. Also, check out this question and answer.

Community
  • 1
  • 1
user2205930
  • 1,046
  • 12
  • 26