up vote 0 down vote favorite

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|improve this question
47% accept rate
Please provide us an example or at least the code. no idea what you mean. – Alex Mar 7 at 16:12
Sure. Here's a jsfiddle that illustrates the problem. – Nutritioustim Mar 7 at 16:30
feedback

1 Answer

up vote 1 down vote accepted

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>
share|improve this answer
Sweet. That did the trick. Thanks. – Nutritioustim Mar 7 at 17:11
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.