外部 div 有点击 function 但内部 div 不能

Question

I don't know how to effectively title the problem but here's the situation.

I have an overlay that is a login window that pops up on a page that a non logged in user cannot access. Since the user cannot access that page I can't have the normal functioning where if you click outside the pop up it just removes itself from the page. So what I have is a re-direct to the sign up page. However since this click function is on the outer div, on the login form inside this div when the user goes to enter the credentials it re-directs.

So I need to not allow it on the form.

So I did this:

$('#logform').click(false);

which works, but now the button to login wont work?

Example:

    <div id="maindiv>
    <form id="logform">
    <input type="text" name="exampleinput">
    <button type="submit" id="loginbutton">
    </form>
    </div>
<script>
    $(document).ready(function(){
        $('.maindiv').show();
        $('.maindiv').click(function(){
            window.location.href='/users/account-info';
        });
    
        $('#logform').click(false);
    
    });


</script>

So how can I disable the href click function for the form but also allow the login button to function correctly?

Answer 1

All you need to do is determine what the element was that the event was triggered on, which can be determined by looking at the event object's .target property. The event object is automatically passed to all DOM event handlers that are registered using a JQuery binding or the vanilla .addEventListener() method.

 #maindiv { background-color:grey; width:100vw; height:100vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="maindiv"> <form id="logform"> <input type="text" name="exampleinput"> <button type="submit" id="loginbutton">Submit</button> </form> </div> <script> $(document).ready(function(){ // Set the event handler up so that it recieves the event reference $('#maindiv').on("click", function(event){ // Determine where the event was triggered // If the click was on the div... if(event.target === this){ location.href='http://www.example.com'; // Redirect } }); }); </script>

Answer 2

Can you change your code? Or is it auto-generated? If you can change your code I highly recommend you place the form into another div outside of your main div, like so:

    <div id="maindiv">
    </div>
    <div id="formdiv">
        <form id="logform">
            <input type="text" name="exampleinput">
            <button type="submit" id="loginbutton">
        </form>
    </div>
<script>
    $(document).ready(function(){
        $('.maindiv').show();
        $('.maindiv').click(function(){
            window.location.href='/users/account-info';
        });
    
        $('#logform').click(false);
    
    });


</script>

This would allow you to, with a bit of CSS click the form without clicking the surrounding div. Assuming you want to freeze your screen so that the user can't scroll, use position: absolute; in your CSS file. If you want to let your user scroll but lack the ability to interact with anything, use position: fixed; . This allows your form to be on top of or under other elements. Then, set z-index to anything greater than the z-index of your background div, or, if you haven't set it yet, write z-index: 2; . The higher z-index when two elements are in the same place is the one that ends up over the other element. This means that your form is on top of(or in front of, they mean the same anyway) your background div, meaning when you click it, you don't actually click the div around it. This allows you to get rid of $('#logform').click(false);

Hope this answer helps you!