Results 1 to 2 of 2

Thread: issue with click propagation through div to text input

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

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,375
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    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.
    - 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

Bookmarks

Posting Permissions

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