Results 1 to 2 of 2

Thread: issue with click propagation through div to text input

  1. #1
    Join Date
    Jun 2008
    Thanked 0 Times in 0 Posts

    Default issue with click propagation through div to text input


    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:

        searchBarInput_Clicked() {
    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:

        searchBarInputOverlay_Clicked() {
    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)?
    Last edited by jscheuer1; 11-04-2017 at 01:33 AM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries


    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:

        searchBarInput_Clicked() {
    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:

        searchBarInput_Clicked(event) {
    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.
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 5
    Last Post: 05-24-2011, 04:20 AM
  2. Jim's DHTML Menu v5.7 Propagation
    By jef in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-08-2010, 04:19 PM
  3. Resolved Remove form input defaults on click
    By nicksalad in forum Looking for such a script or service
    Replies: 12
    Last Post: 02-21-2009, 05:49 PM
  4. Session state propagation in iframes
    By ShotJustice in forum PHP
    Replies: 3
    Last Post: 03-08-2007, 07:25 PM
  5. domain propagation
    By sofy60 in forum Other
    Replies: 0
    Last Post: 03-28-2005, 08:04 PM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts