# How to detect mouse-down in web container

**URL:** <https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149>\
**Category:** Web\
**Created:** [March 31, 2023, 1:41pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149 "2023-03-31T13:41:07Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Serge\_Louvet1](https://forum.xojo.com/letter_avatar_proxy/v4/letter/s/898d66/32.png) [@Serge\_Louvet1](https://forum.xojo.com/u/Serge_Louvet1)\
**Post date:** [March 31, 2023, 1:41pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/1 "2023-03-31T13:41:07Z")

</div>

Hi. I’m trying to compile a Web app that was create with xojo2017 with the latest/greatest version of 2023. I have an issue for which I did not find a solution:  
The application dynamically creates container controls and put them one under the other (visually I mean) to build something that looks like a flow. The container implements an event handler for the mouse-down event to make itself ‘selected’. I cannot find a corresponding event in the latest version.  
Did I miss something ? Is there a work-around ?

---

<div class="post-metadata">

**Author:** ![Greg\_O](https://forum.xojo.com/user_avatar/forum.xojo.com/greg_o/32/22785_2.png) [@Greg\_O](https://forum.xojo.com/u/Greg_O)\
**Post date:** [March 31, 2023, 2:13pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/2 "2023-03-31T14:13:37Z")

</div>

> [@Serge\_Louvet1](#):
>
> The application dynamically creates container controls and put them one under the other (visually I mean) to build something that looks like a flow.

While I know this isn’t your question, web 2 has the concept of flows built in. Any control that is a subclass of WebView can have its layout type set to Fixed or Flex. See:

[https://documentation.xojo.com/api/user\_interface/web/webview.html#webview-layouttypes](https://documentation.xojo.com/api/user_interface/web/webview.html#webview-layouttypes)

---

<div class="post-metadata">

**Author:** ![Greg\_O](https://forum.xojo.com/user_avatar/forum.xojo.com/greg_o/32/22785_2.png) [@Greg\_O](https://forum.xojo.com/u/Greg_O)\
**Post date:** [March 31, 2023, 2:14pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/3 "2023-03-31T14:14:48Z")

</div>

Otherwise, put a rectangle in the background of your container and implement the Pressed event there.

---

<div class="post-metadata">

**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\
**Post date:** [March 31, 2023, 5:41pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/4 "2023-03-31T17:41:23Z")

</div>

> **[onmousedown Event](https://www.w3schools.com/jsref/event_onmousedown.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

**Author:** ![Jeremie\_L](https://forum.xojo.com/user_avatar/forum.xojo.com/jeremie_l/32/150_2.png) [@Jeremie\_L](https://forum.xojo.com/u/Jeremie_L)\
**Post date:** [April 1, 2023, 4:16pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/5 "2023-04-01T16:16:45Z")

</div>

Unfortunately WebRectangle (API2) does not have a Pressed event.

I had the exact similar issue two weeks ago, porting an old Web Project to Xojo 2022r4.  
Placing a WebCanvas in the background of the container (WebCanvas has a Pressed event) wasn’t a solution either because any WebLabel placed above the canvas would prevent clicking. And the WebContainer was full of labels.

I ended up using a WebButton to set the “selected” state.

Using onmousedown as Michel suggests is another solution.

---

<div class="post-metadata">

**Author:** ![Serge\_Louvet1](https://forum.xojo.com/letter_avatar_proxy/v4/letter/s/898d66/32.png) [@Serge\_Louvet1](https://forum.xojo.com/u/Serge_Louvet1)\
**Post date:** [April 1, 2023, 6:20pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/6 "2023-04-01T18:20:05Z")

</div>

Thanks. But seems the WebRectangle does not expose a ‘pressed’ event.

---

<div class="post-metadata">

**Author:** ![Serge\_Louvet1](https://forum.xojo.com/letter_avatar_proxy/v4/letter/s/898d66/32.png) [@Serge\_Louvet1](https://forum.xojo.com/u/Serge_Louvet1)\
**Post date:** [April 1, 2023, 6:22pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/7 "2023-04-01T18:22:03Z")

</div>

Thanks. Which Web component has ‘OnMouseDown’ ?

---

<div class="post-metadata">

**Author:** ![Serge\_Louvet1](https://forum.xojo.com/letter_avatar_proxy/v4/letter/s/898d66/32.png) [@Serge\_Louvet1](https://forum.xojo.com/u/Serge_Louvet1)\
**Post date:** [April 1, 2023, 6:35pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/8 "2023-04-01T18:35:44Z")

</div>

Thanks. Indeed. I tried to ‘bring to front’ the canvas, but then controls are hidden. There are other issues when trying to get the app to compile with latest version of xojo (controlsets are gone, same for webstyle, …) Seems it might be faster to rewrite the UI part.

---

<div class="post-metadata">

**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\
**Post date:** [April 1, 2023, 7:25pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/9 "2023-04-01T19:25:26Z")

</div>

> [@Serge\_Louvet1](#):
>
> Thanks. Which Web component has ‘OnMouseDown’ ?

All HTML elements support onmousedown. But this is accessible with JavaScript.

---

<div class="post-metadata">

**Author:** ![Daniel\_Fritzsche](https://forum.xojo.com/user_avatar/forum.xojo.com/daniel_fritzsche/32/478_2.png) [@Daniel\_Fritzsche](https://forum.xojo.com/u/Daniel_Fritzsche)\
**Post date:** [April 1, 2023, 10:59pm UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/10 "2023-04-01T22:59:57Z")

</div>

And how is it accessible?

---

<div class="post-metadata">

**Author:** ![Michel\_Bujardet](https://forum.xojo.com/user_avatar/forum.xojo.com/michel_bujardet/32/252_2.png) [@Michel\_Bujardet](https://forum.xojo.com/u/Michel_Bujardet)\
**Post date:** [April 2, 2023, 9:43am UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/11 "2023-04-02T09:43:00Z")

</div>

It needs a javascript method that attaches the onmousedown to the element and sends back to the Xojo program.

If you never touched Javascript, perhaps it is better to use plain Xojo.

---

<div class="post-metadata">

**Author:** ![Ricardo\_Cruz](https://forum.xojo.com/user_avatar/forum.xojo.com/ricardo_cruz/32/7852_2.png) [@Ricardo\_Cruz](https://forum.xojo.com/u/Ricardo_Cruz)\
**Post date:** [April 2, 2023, 11:37am UTC](https://forum.xojo.com/t/how-to-detect-mouse-down-in-web-container/75149/12 "2023-04-02T11:37:09Z")

</div>

WebCanvas should be enough, but I’ve just made a simple Web SDK control you can put on top of the others. It has a Pressed event you can use.

> **[GitHub - piradoiv/clickable-surface: Xojo ClickableSurface Web Control](https://github.com/piradoiv/clickable-surface)**
>
> Xojo ClickableSurface Web Control. Contribute to piradoiv/clickable-surface development by creating an account on GitHub.
