Как выйти из функции щелчка или предотвратить запуск функции, пока не будет выполнено условие - PullRequest
Новая
       1

Как выйти из функции щелчка или предотвратить запуск функции, пока не будет выполнено условие

0 голосов
/ 08 октября 2019

Цель:
Я хочу иметь возможность добавлять комментарии к изображениям и использовать их координаты 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 ]

0 голосов
/ 08 октября 2019

работает и проверено :)! Хорошо, мы могли бы немного поработать над стилем страницы, но: 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>
0 голосов
/ 08 октября 2019

Как упомянул @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;
        }

});
0 голосов
/ 08 октября 2019

Я не знаю, почему все усложняют. Сначала дайте форму и кнопку идентификатор. Затем определите класс 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"); 
    }
 }

Состояние переключения имеет недостаток в вашем случае - сложность в обращении. Лучше всего работает с простым идентификатором и кнопкой. В этом нет никаких сомнений. Добавление и удаление обработчиков также не имеет никакого смысла. Пользователь нажимает на форму или кнопку, и форма становится видимой. Или он щелкает что-то еще. В этом случае не будет выбран ни один идентификатор или «неправильный» идентификатор. В этом случае правило переключения по умолчанию делает форму невидимой. Эта вещь не проверена и может потребовать незначительных изменений. И самое лучшее - в обработчике событий вы также можете добавлять очень простые дополнительные действия.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...