# Pass through mouse clicks - Perspective

**URL:** <https://forum.inductiveautomation.com/t/pass-through-mouse-clicks-perspective/57180>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [March 14, 2022, 10:01pm UTC](https://forum.inductiveautomation.com/t/pass-through-mouse-clicks-perspective/57180 "2022-03-14T22:01:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chris\_Bingham](https://avatars.discourse-cdn.com/v4/letter/c/e5b9ba/32.png) [@Chris\_Bingham](https://forum.inductiveautomation.com/u/Chris_Bingham)\
**Post date:** [March 14, 2022, 10:01pm UTC](https://forum.inductiveautomation.com/t/pass-through-mouse-clicks-perspective/57180/1 "2022-03-14T22:01:59Z")

</div>

tl;dr: Ignition 8.1.15, Perspective Module: I'm looking for an elegant way to utilize all of the built-in animations & events (onMouseOver, onActionPerformed, etc) of a button which is NOT in the foreground.

After some searching, I found a similar post with an elegant solution for the Vision module:

> [Button Events Within Templates - #17 by Kyle\_Chase](https://forum.inductiveautomation.com/t/button-events-within-templates/14382/17)

Operating under the principal that "if something is clickable, it should appear clickable". The pre-canned button appears to contain all of the functionality that I'm looking for (bezel, shadow, animations, etc.). I'm building a series of templates / widgets which have various indicators located on top of said-button. For a motor, there may be alarm indications visible, HOA status (if installed), pump command/status indicators, etc. If operator hovers above or clicks anywhere within the bounds of the widget, the events defined on the button should act as if the button were in the foreground.

I've attempted to utilize / migrate some of the code from the aforementioned link. But, it appears that the canned methods might be reassigning the 'event' object, such that invoking 'event.source' yields the error: _object has no attribute 'source'_. ?? (Insight here appreciated.)

For testing, I've created a button named **btnNav** (z-order = back) with an **onActionPerformed** component event script:

```auto
system.perspective.print("Button was Pressed!")

```

I've added another button in the same view named **btnFaux** (z-order = front), and would like to translate all actions from this button to **btnNav**. Any recommendations on code to add to **btnFaux** events to accomplish my task? Will this method for **onActionPerformed** also translate to **onMouseOver** (or **onMouseEnter** / **onMouseLeave** )? Other approaches to the same task are appreciated.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 14, 2022, 10:52pm UTC](https://forum.inductiveautomation.com/t/pass-through-mouse-clicks-perspective/57180/2 "2022-03-14T22:52:07Z")

</div>

_Nothing_ from Vision will translate to Perspective in this area. The underlying technologies are fundamentally completely different, even without the other hurdles (your scripts are running on the gateway, not the local browser session).

My first question is: Why do you feel you need to have two buttons overlaid?  
If you want a non-button, clickable thing, that "feels" clickable, just create a style class with appropriate `hover` and `active` styles:

> [@Perspective Custom Button](https://forum.inductiveautomation.com/t/perspective-custom-button/49119/3):
>
> I did a flex container with a style class (on the root container, crucially) - the meta props are what you’re after: [screenshot2c8ZBn]

---

<div class="post-metadata">

**Author:** ![Chris\_Bingham](https://avatars.discourse-cdn.com/v4/letter/c/e5b9ba/32.png) [@Chris\_Bingham](https://forum.inductiveautomation.com/u/Chris_Bingham)\
**Post date:** [March 15, 2022, 12:46am UTC](https://forum.inductiveautomation.com/t/pass-through-mouse-clicks-perspective/57180/3 "2022-03-15T00:46:04Z")

</div>

Thanks for your insight!

> _Nothing_ from Vision will translate to Perspective in this area.

Understood, and my ignorance of everything going on in the background is evident. The documentation shows some common-ground between event types, component methods, etc. I suppose I was searching for a Perspective-equivalent to passing events between objects, if one exists, because the Vision-specific solution is among the more elegant I've seen. Instead, "I just want to add a few animations on top of this button" = rethink / redesign the template.

> My first question is: Why do you feel you need to have two buttons overlaid?  
> If you want a non-button, clickable thing, that “feels” clickable, just create a style class with appropriate `hover` and `active` styles:

To me, a button-object seems to be the logical place to call a popup & handle animations for an object that looks like a button. Passing from one object to the next seems less-logical, but still retains a straightforward 'button-like' configuration.

My first attempt with Perspective templates was similar to your recommendation above, and sure, it looked-and-functioned enough like a button, but also seemed less-straightforward for those behind me. If this is the preferred method, I'll work to refine my original objects and classes. 👍

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 15, 2022, 3:56pm UTC](https://forum.inductiveautomation.com/t/pass-through-mouse-clicks-perspective/57180/4 "2022-03-15T15:56:13Z")

</div>

the style `pointer-events:none` makes the mouse go through it… it also prevents hovers though, so i dont think you want to use it.

And tbh even if it didnt prevent hovers, you still should not do this but style the object itself to look like the button
