外部 div 有點擊 function 但內部 div 不能

Question

我不知道如何有效地為問題命名，但情況就是這樣。

我有一個覆蓋，它是一個登錄 window，它會在非登錄用戶無法訪問的頁面上彈出。 由於用戶無法訪問該頁面，因此我無法正常運行，如果您在彈出窗口外部單擊，它只會將自身從頁面中刪除。 所以我所擁有的是重定向到注冊頁面。 但是，由於此單擊 function 位於外部 div 上，因此當用戶輸入重定向的憑據時，在此 div 內的登錄表單上。

所以我需要不允許它出現在表格上。

所以我這樣做了：

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

哪個有效，但現在登錄按鈕不起作用？

例子：

    <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>

那么如何才能正確禁用表單的href單擊function，但也允許登錄按鈕正確地指向function？

Answer 1

您需要做的就是確定觸發事件的元素是什么，這可以通過查看event對象的.target屬性來確定。 event object 會自動傳遞給使用 JQuery 綁定或 vanilla .addEventListener .addEventListener()方法注冊的所有 DOM 事件處理程序。

 #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

你能改變你的代碼嗎？ 還是自動生成的？ 如果您可以更改代碼，我強烈建議您將表單放入主 div 之外的另一個 div 中，如下所示：

    <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>

這將允許您使用一點 CSS 單擊表單而不單擊周圍的 div。 假設您想凍結屏幕以使用戶無法滾動，請使用position: absolute; 在您的 CSS 文件中。 如果您想讓您的用戶滾動但缺乏與任何東西交互的能力，請使用position: fixed; . 這允許您的表單位於其他元素之上或之下。 然后，將z-index設置為大於背景 div 的z-index的任何值，或者，如果尚未設置，請編寫z-index: 2; . 當兩個元素在同一個位置時，較高的z-index是最終超過另一個元素的那個。 這意味着您的表單位於您的背景 div 之上（或前面，它們的含義相同），這意味着當您單擊它時，您實際上並沒有單擊它周圍的 div。 這使您可以擺脫$('#logform').click(false);

希望這個答案對你有幫助！