第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

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

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

MMTTMM 2021-11-12 16:04:26
目標(biāo)：我希望能夠在圖像上添加評(píng)論并使用它們的 X、Y 坐標(biāo)來(lái)保存評(píng)論并顯示以備后用。預(yù)期結(jié)果：我希望用戶單擊啟用“評(píng)論模式”并顯示表單的“新評(píng)論”按鈕。如果用戶單擊遠(yuǎn)離表單，我希望表單隱藏并禁用“評(píng)論模式”，直到用戶再次單擊“新評(píng)論”。如果再次按下“新評(píng)論”，請(qǐng)重復(fù)上述操作。實(shí)際結(jié)果：該代碼片段當(dāng)前允許用戶單擊“新評(píng)論”。單擊后，該commentMode()函數(shù)將被觸發(fā)并偵聽#imageWrapper. 如果用戶點(diǎn)擊離開，表單將被隱藏 - 但當(dāng)我再次按下“新評(píng)論”時(shí)，表單將保持隱藏狀態(tài)。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貢獻(xiàn)1909條經(jīng)驗(yàn) 獲得超7個(gè)贊

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


<style>

  .invisible   {

    display:none;  

  }


.visible   {

    display:block !important;  

 }

</style>

現(xiàn)在我們添加一個(gè)文檔偵聽器，使事情變得更簡(jiǎn)單，而不是擺弄任何事件......


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"); 

    }

 }

在您的情況下，切換狀態(tài)有一個(gè)缺點(diǎn) - 處理起來(lái)很復(fù)雜。通過(guò)簡(jiǎn)單的 id 和按鈕效果最佳。那時(shí)是毫無(wú)疑問(wèn)的。添加和刪除處理程序也沒有實(shí)際意義。用戶單擊表單或按鈕，表單將變?yōu)榭梢??；蛘咚c(diǎn)擊別的東西。在這種情況下，不會(huì)選擇 id 或“錯(cuò)誤”的 id。在這種情況下，默認(rèn)切換規(guī)則使表單不可見。這個(gè)東西未經(jīng)測(cè)試，可能需要一些小的調(diào)整。最好的 - 在事件處理程序中，您現(xiàn)在還可以添加非常簡(jiǎn)單的更多操作。


查看完整回答
反對(duì) 回復(fù) 2021-11-12
?
森欄

TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超5個(gè)贊

我試圖重構(gòu)代碼。我首先將代碼清理成函數(shù)，而不是嵌套單擊事件。在重構(gòu)時(shí)，我使用console.log's 來(lái)幫助我確定 何時(shí)處于commentMode活動(dòng)狀態(tài) - 然后觸發(fā)showForm()或hideForm()功能。對(duì)于一個(gè)工作示例：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;

        }


});



查看完整回答
反對(duì) 回復(fù) 2021-11-12
?
叮當(dāng)貓咪

TA貢獻(xiàn)1776條經(jīng)驗(yàn) 獲得超12個(gè)贊

工作和測(cè)試:)！好的，我們可以在頁(yè)面樣式上做很多工作，但是 :d 看看整個(gè)頁(yè)面看起來(lái)也很簡(jiǎn)單。我不必為這個(gè)小任務(wù)與 jquery 爭(zhēng)吵 :) 我也僅通過(guò)純 html 設(shè)置了自動(dòng)對(duì)焦。


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



查看完整回答
反對(duì) 回復(fù) 2021-11-12
  • 3 回答
  • 0 關(guān)注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)