How to prevent a click from passing through a fixed positioned element to the element behind it?

Question

I have a fixed positioned header which has a searchbox in it and there is some content behind it (The header has higher z-index). I have an event handler which handles the 'focus' event on the searchbox. The problem is that when I click in the searchbox, this event handler triggers, but the click also passes through the header to the elements behind it. I don't want the click to pass through. I tried event.preventDefault(), event.stopPropagating() and event.cancelBubble = true but none of them seems to work.

Answer 1

It looks like you're trying to stop the propagation of the focus event.

Try binding the click event of the searchbox and use event.stopPropagation() on it.