Mouse

This topic describes how your application can receive input from a mouse.

Related Info

• Mouse Events

The user can interact with your application using a connected mouse.

<tizen:setting pointing-device-support='enable' />
<tizen:setting pointing-device-support='disable' />

Floating Menu

The Floating Menu functionality is provided in the form of an overlay menu to navigate and use functions of a remote control by using the mouse right click.
The floating.navigation metadata key was introduced starting from 2024 products (Tizen 8.0) to configure the Floating Menu.

• Enabling the Floating Menu:
  The Floating Menu is enabled by default. The floating.navigation metadata key does not need to be explicitly added to the application's "config.xml" to enable the Floating Menu.

• Disabling the Floating Menu:
  To disable the Floating Menu, the value of the floating.navigation metadata key must be set to false:

<tizen:metadata key="http://samsung.com/tv/metadata/floating.navigation" value="false"/>

Floating Menu Types:

Type 1: Basic floating menu

• This menu is used if the application supports both input from mouse (using pointing-device-support='enable') and the Floating Menu with floating.navigation='true'.
• The following overlay menu appears when using the mouse right click.
  

Type 2: Floating menu with D-pad for screen navigation

• This menu is used if the application does not support input from mouse (using pointing-device-support='disable') but supports the Floating Menu with floating.navigation='true'.

• The following overway menu appears when using the mouse right click.
  

• The following pop-up appears when using the mouse left click.
  

Handling Mouse Events

The supported mouse events are described in the W3C Mouse Events.

To receive notifications for mouse events, for example, the click event:

1. Create a listener for the click event. The listener is notified each time the element is clicked.

   <div id='button' ... onclick='handleKeyClick();'> ... </div>
   

   or

   document.getElementById('button').addEventListener('click', handleKeyClick);
   

2. Define the listener:

   function handleKeyClick () {
   // Something you want to do
   ...
   }