亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何退出單擊功能或阻止該功能在滿足條件之前觸發

如何退出單擊功能或阻止該功能在滿足條件之前觸發

MMTTMM 2021-11-12 16:04:26
目標：我希望能夠在圖像上添加評論并使用它們的 X、Y 坐標來保存評論并顯示以備后用。預期結果：我希望用戶單擊啟用“評論模式”并顯示表單的“新評論”按鈕。如果用戶單擊遠離表單，我希望表單隱藏并禁用“評論模式”，直到用戶再次單擊“新評論”。如果再次按下“新評論”，請重復上述操作。實際結果：該代碼片段當前允許用戶單擊“新評論”。單擊后，該commentMode()函數將被觸發并偵聽#imageWrapper. 如果用戶點擊離開，表單將被隱藏 - 但當我再次按下“新評論”時，表單將保持隱藏狀態。function commentMode() {          imageWrapper.toggleClass('new-comment-pointer'); // changes cursor to show its active          imageWrapper.click(function(e) { // on clicking the image            newComment = !newComment; // newComment is true            console.log(newComment);            if(newComment) { // if newComment is true, show the form near the click              getCoordinates(e, $('#imageWrapper'));              form.show().css({'left': formX, 'top': formY});              form.find('textarea').focus();              form.find('#xAxis').val(x); // x is from the getCoordinates              form.find('#yAxis').val(y); // y is from the getCoordinates            } else { // if newComment is false, hide the form and turn stop imageWrapper.click              form.hide();              imageWrapper.removeClass('new-comment-pointer');              newComment = !newComment;              return; //stop listening for click            }            return;           });        }https://codepen.io/lachiekimber/pen/YzzPEqw
查看完整描述

3 回答

?
jeck貓

TA貢獻1909條經驗 獲得超7個贊

我不知道為什么每個人都把它復雜化。首先給表單和按鈕一個 id。然后定義一個隱藏的默認表單 css 類。定義另一個使其可見的類：


<style>

  .invisible   {

    display:none;  

  }


.visible   {

    display:block !important;  

 }

</style>

現在我們添加一個文檔偵聽器，使事情變得更簡單，而不是擺弄任何事件......


document.addEventListener(" click ", function(event) {

//try to get a id even when the event element has not

// directly a id but maybee his parent the form

try {

   var id = event.target.id;

   if (id === "") {

      for (i = 0; i < event.path.length; i++) {

        id = event.path[i].id;

        if (id !== "") {

           if (id === "formid") {

            break;

           }

        }


    }

    } catch(ex){

       console.log(ex);

       return;

    } 

    var form=document.getElementById("formid");

    switch(id){

        case "showcommehtbuttonid":

        case "formid":

              form.classList.add("visible");

        break;

        default:

              form.classList.remove("visible"); 

    }

 }

在您的情況下，切換狀態有一個缺點 - 處理起來很復雜。通過簡單的 id 和按鈕效果最佳。那時是毫無疑問的。添加和刪除處理程序也沒有實際意義。用戶單擊表單或按鈕，表單將變為可見?；蛘咚c擊別的東西。在這種情況下，不會選擇 id 或“錯誤”的 id。在這種情況下，默認切換規則使表單不可見。這個東西未經測試，可能需要一些小的調整。最好的 - 在事件處理程序中，您現在還可以添加非常簡單的更多操作。


查看完整回答
反對 回復 2021-11-12
?
森欄

TA貢獻1810條經驗 獲得超5個贊

我試圖重構代碼。我首先將代碼清理成函數，而不是嵌套單擊事件。在重構時，我使用console.log's 來幫助我確定 何時處于commentMode活動狀態 - 然后觸發showForm()或hideForm()功能。對于一個工作示例：https : //codepen.io/lachiekimber/pen/bGGNYmK


$(function () {


        var imageWrapper = $('#imageWrapper');

        var form = $('.new-comment');

        var x, y, formX, formY;

        var newComment = true;

        var commentMode = false;


        $('#newComment').click(function() {

          imageWrapper.toggleClass('new-comment-pointer');

          commentMode = !commentMode;

          //console.log('newComment');

        });


        $('#imageWrapper').click(function(e) {

          if(commentMode) {

            //console.log('commentMode: true');

            showForm(e);

          } else {

            //console.log('commentMode: false');

            hideForm();

          }

        });


        function showForm(e) {

          getCoordinates(e, imageWrapper);

          form.show().css({'left': formX, 'top': formY});

          form.find('textarea').focus();

          form.find('#xAxis').val(x); // x is from the getCoordinates

          form.find('#yAxis').val(y); // y is from the getCoordinates

        }


        function hideForm() {

          form.hide();

        }


        function getCoordinates(e, image) {

          var offset = image.offset();

          x = e.pageX - offset.left;

          y = e.pageY - offset.top;

          formX = x + 50;

          formY = y + 20;

        }


});



查看完整回答
反對 回復 2021-11-12
?
叮當貓咪

TA貢獻1776條經驗 獲得超12個贊

工作和測試:)！好的，我們可以在頁面樣式上做很多工作，但是 :d 看看整個頁面看起來也很簡單。我不必為這個小任務與 jquery 爭吵 :) 我也僅通過純 html 設置了自動對焦。


            <!DOCTYPE HTML>


        <html>


            <head>

                <title>Untitled</title>

                <style>

                    .invisible {

                        display: none;

                        border: 1px solid red;

                    }


                    .visible {

                        display: block !important;

                    }

                </style>

            </head>


            <body>


                <form id="formid" class="invisible">

                    <h1>Form</h1>

                    <input type="text" name="size" autofocus>


                </form>


                <hr>

                <input type="button" value="click" id="showcommentbuttonid">

                <script>

                    document.addEventListener("click", function(event) {

                                 try {

                                    var id = event.target.id;

                                    if (id === "") {

                                        for (i = 0; i < event.path.length; i++) 

                                          {

                                            id = event.path[i].id;

                                            if (id !== "") {

                                                if (id === "formid") {

                                                    break;

                                                }

                                            }

                                        }

                                    }

                                } catch (ex) {

                                    console.log(ex);

                                    return;

                                }

                                var form = document.getElementById("formid");

                                switch (id) {

                                    case "showcommentbuttonid":

                                    case "formid":

                                        form.classList.add("visible");

                                        break;

                                    default:

                                        form.classList.remove("visible");

                                }


                            }

                            )

                </script>

            </body>


        </html>



查看完整回答
反對 回復 2021-11-12
  • 3 回答
  • 0 關注
  • 162 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號