Home/ Questions/Q 7604093
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T23:49:16+00:00

Let’s say I have a div that’s 500 x 500px. Inside that, I have

  • 0

Let’s say I have a div that’s 500 x 500px. Inside that, I have an <input type="file" />, that’s also 500 x 500, and with an opacity of 0.

Inside of my div, I put another text or text area input over top the invisible one. Now, whenever I click inside the parent top input, a file chooser appears (belonging to the invisible file input underneath).

Is there a way of capturing the click event so that it stops at the top input. I don’t want to see a file choose appear when dealing with my top, text input.

Sample Here.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Using Javascript:

    <html>
<head>
    <script type="text/JavaScript">
        function doSomething(event)
        {
            // use these functions to stop the event here
            // different browsers may or may not have the function, so check to make sure it exists before calling it.
            if (event.cancelBubble)
                event.cancelBubble();
            if (event.stopPropagation)
                event.stopPropagation();
        }
    </script>
</head>
<body>
    <div onclick="alert('this will not show when you click on the text input');">
        <input type="text" onclick="doSomething(event)" />
    </div>
</body>
</html>
    • 0