roblox-ts•3mo ago

how can you detect a click that was made outside the required component?

I want to make something like a context menu on the Windows OS desktop, I did the positioning when I click on the frame, but I don’t know how I can detect the click outside of the menu to hide it. Do you have any suggestions?

21 Replies

Tester•3mo ago

Click outside of the window? Wdym

MirroxOP•3mo ago

like are you using windows? OS anyways if you right click somewhere on the desktop a menu will appear it won't disappear unless you click somewhere outside of that menu

MirroxOP•3mo ago

I'm trying to do something like that But I can't figure out how to hide it

MirroxOP•3mo ago

Tester•3mo ago

Context menu you mean?

MirroxOP•3mo ago

ah right context menu yeah

Tester•3mo ago

Can you add full screen button that if you click on will hide it Or can listen to mouse input and check if the click is outside?

MirroxOP•3mo ago

Sounds like not the best solution to be honest, are there any other options? Or is this the simplest one

Tester•3mo ago

It is the simplest . 2. I did it a couple times and it worked flawlessly But anyway

MirroxOP•3mo ago

but how can I prevent the click on that button from happening in the context menu, ZIndex?

Tester•3mo ago

You just put the context menu above the button Do you use react?

MirroxOP•3mo ago

I do

Tester•3mo ago

Or another thing I found that it's sometimes easier to use Z-index behaviour global It mimics html good Esp for context menus

MirroxOP•3mo ago

I see

Tester•3mo ago

Anyway Now the question is how to position the click off button Btw

MirroxOP•3mo ago

hm?

Tester•3mo ago

If you listen to the mouse input instead you will be able to replicate the real context menu I think Since with the click off button you will have to click one more time Can you actually do InputService.InputBegan for now And check if the input is touch or mouse click

MirroxOP•3mo ago

okay If I do it that way, how do I calculate if the click was outside of the frame Solved, if anyone needs it:

    useEventListener(UserInputService.InputBegan, (input) => {
        const isLeftClick = input.UserInputType === Enum.UserInputType.MouseButton1
        const isRightClick = input.UserInputType === Enum.UserInputType.MouseButton2
        if (!isLeftClick && !isRightClick) return
        const mouse = UserInputService.GetMouseLocation()
        const position = absolutePosition.getValue()
        const size = absoluteSize.getValue()

        if (
            position.X + size.X < mouse.X ||
            position.X > mouse.X ||
            position.Y + size.Y < mouse.Y ||
            position.Y > mouse.Y
        ) {
            hide()
        }
    })

    useEventListener(UserInputService.InputBegan, (input) => {
        const isLeftClick = input.UserInputType === Enum.UserInputType.MouseButton1
        const isRightClick = input.UserInputType === Enum.UserInputType.MouseButton2
        if (!isLeftClick && !isRightClick) return
        const mouse = UserInputService.GetMouseLocation()
        const position = absolutePosition.getValue()
        const size = absoluteSize.getValue()

        if (
            position.X + size.X < mouse.X ||
            position.X > mouse.X ||
            position.Y + size.Y < mouse.Y ||
            position.Y > mouse.Y
        ) {
            hide()
        }
    })

Tester•3mo ago

const offset = mouse_position.sub(absolute_position);
const is_inside = offset.X >= 0 && offset.X <= absolute_size.X && offset.Y >= 0 && offset.Y <= absolute_size.Y;
if(!is_inside) hide();

const offset = mouse_position.sub(absolute_position);
const is_inside = offset.X >= 0 && offset.X <= absolute_size.X && offset.Y >= 0 && offset.Y <= absolute_size.Y;
if(!is_inside) hide();

hate when the if statement looks very spreaded like

if (
 //
 //
) {
 //
}

if (
 //
 //
) {
 //
}

it makes a bit unreadable

MirroxOP•3mo ago

true

Gaming

Programming

how can you detect a click that was made outside the required component?

Did you find this page helpful?