issue with click propagation through div to text input

Hello,

I have a strange situation that I need some help with. The explanation for this may seem strange but bear with me:

I have three elements:

* A div whose z-index is 20. It is transparent.
* A text input field whose z-index is 15. It's underneath the div
* Another div whose z-index is 10. It's underneath the text input

There is a click event on the z-index=10 div that causes the each of the three elements above to collapse (height=0). If I try to click on the input in order to type in some text, the click event propogates through all three elements and is finally consumed by the z-index=10 div and the whole thing collapses. In order to prevent this, I tried binding the follow event handler to the input:

Code:

---

    searchBarInput_Clicked() {
        window.event.stopPropagation();
    }

---

This does not work for some reason. Putting a break point here shows that the function doesn't get called. I'm guessing it's because click event handlers only get called for direct click events, not propogate through events.

So then I tried binding the following event handler to the z-index=20 div:

Code:

---

    searchBarInputOverlay_Clicked() {
        $('#SearchBarInput').focus();
        window.event.stopPropagation();
    }

---

This seems to work. It gives the input field focus so that the user can type something, but then stops the event from propogating, thus preventing the z-index=10 div from collapsing.

However, it has a side effect, and this is what I need help with. Although the input field gets the focus, I cannot do any mouse operations on it, like position the cursor on a certain spot, drug to highlight text, right-click on it, etc.

Is there any way to get these operations to take effect on the input given the setup I described above. If not, is there a way to get the click event to propogate to the input but then stop (remember that searchBarInput_Clicked() doesn't get called in this case)?

First of all this sounds sort of backwards. The event should never register on the lower z-index element, but perhaps might if both covering elements are transparent. In any case, and this is only a general observation:

Code:

---

    searchBarInput_Clicked() {
        window.event.stopPropagation();
    }

---

is meaningless except in older IE browsers, none of which are generally used these days. A rough equivalent workable in today's browsers would be:

Code:

---

    searchBarInput_Clicked(event) {
        event.stopPropagation();
    }

---

But this assumes a lot. Worth a try though.

If you want more help, please post a link to the page on your site that demonstrates the problem.