Hotspot Javascript onclick выполняет 2 разные задачи - PullRequest
Новая
       9

Hotspot Javascript onclick выполняет 2 разные задачи

0 голосов
/ 14 января 2019

Я хотел бы создать динамические точки доступа на основе события mouseclick, если

1) Нажмите один раз: нарисуйте горячую точку (к ней добавлена ​​кнопка «плюс»), и при нажатии кнопки появится всплывающее модальное диалоговое окно с комментариями пользователей, относящимися к этой конкретной точке.

2) Нажмите еще раз: Удалить точку.

Я могу выполнить вышеупомянутые 2 задачи, но когда я закрываю всплывающее модальное диалоговое окно, указатель горячей точки также исчезает.

Я полагаю, что это из-за метода добавления. 

function draw() {
  dots.innerHTML = '';
  history[historyIndex].forEach(function(dot) {
    var elem = dots.appendChild(document.createElement('div'));
    elem.className = 'dot';
    elem.style.left = dot.get('x') + 'px';
    elem.style.top = dot.get('y') + 'px';

    var btnPlus = document.createElement('button')
    btnPlus.className='btn btn-default btn-circle';
    btnPlus.setAttribute("id", "btnPlus");
    var icon = document.createElement('i');
    icon.className='glyphicon glyphicon-plus';
    btnPlus.append(icon);
    elem.append(btnPlus);
    console.log(btnPlus);
   /* var modal = elem.appendChild(document.createElement('div'));
    modal.setAttribute("id", "myModal");
    modal.setAttribute("class", "modal");
    var modalContent = document.createElement('div');
    modalContent.setAttribute("class", "modal-content");
    var content = modal.appendChild(modalContent);
*/    // clicking on a dot removes it.
    elem.addEventListener('click', function(e) {
      removeDot(dot.get('id'));
      e.stopPropagation();

    });
    btnPlus.addEventListener('click', function(e) {
        myFunction();
});


  });
  undo.disabled = (historyIndex != 0) ? '' : 'disabled';
  redo.disabled = (historyIndex !== history.length - 1) ? '' : 'disabled';
}
...