Question

目标：
我希望能够在图像上添加注释，并使用其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

Answer 1

我不知道为什么每个人都变得复杂。首先给表单和按钮一个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和按钮，效果最佳。毫无疑问。添加和删除处理程序也没有任何实际意义。用户单击表单或按钮，该表单将变为可见。或者他单击其他内容。在这种情况下，将不会选择任何ID或“错误”的ID。在这种情况下，默认切换规则使该表单不可见。这个东西未经测试，可能需要一些小的调整。最好-在事件处理程序中，您现在还可以添加非常简单的更多操作。

Answer 2

正如@Davo在评论中提到的那样，我试图重构代码。我首先将代码整理成函数，而不是嵌套单击事件。在重构的同时，我使用console.log来帮助确定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;
        }

});

Answer 3

工作并经过测试:)！好的，我们可以在页面样式上工作很多，但：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>

如何退出点击功能或阻止该功能触发，直到满足条件

3 个答案: