2 Replies Latest reply on Aug 18, 2014 7:55 AM by eliverrang

    How do I prevent a higher symbol trapping my clicks

    eliverrang Level 1

      In my composition I've added a symbol to give me an animated menu. However this menu symbol is above the symbol where I need to use a click action and the menu symbol layer seems to be trapping my click event. How do I arrange for the click event to pass through the menu symbol layer?


      Peter Small

        • 1. Re: How do I prevent a higher symbol trapping my clicks
          Robyn_cpl Level 2

          If you use this on the symbol that is getting in the way it should allow you to click straight through it.


          sym.$(this).css('pointer-events', 'none');


          this = the symbol name, the symbol name may have to go inside " " since I can't remember


          if you you want to turn it back to clickable you just change the none to visible.


          hope this helps

          1 person found this helpful
          • 2. Re: How do I prevent a higher symbol trapping my clicks
            eliverrang Level 1

            Thanks Robyn_cpl for the heads up on the css 'pointer-events' function. Unfortunately I could not get it to work. I tried several ways but couldn't seem to apply it to the stage area of the symbol I was using for the menu.


            However I did learn quite a bit in the experimenting. I discovered that when you create a symbol in a composition and then transfer it to another composition (copy and paste) - as I did for my project - the symbol comes with its own stage area. It was this 'invisible' stage area that was blocking my click event and preventing the click event going through to the button in another symbol below.

            By making this 'invisible' stage area of the top symbol smaller (so that it didn't cover the button below), everything worked fine.


            Despite my problem being solved, I'd still like to know more about this 'invisible' stage area that comes with imported symbols. Although you can see its outline (and change its size and position) there doesn't seem to be any way to bind a function to it like you can with the main stage. This, it seems, is why I couldn't use the css 'pointer-events' function to allow the click event to pass through.


            I'd be grateful for any clarification as to this situation and maybe a link to somewhere that explains all of this.


            Peter Small