一种跟踪和使用连续点击的方法

Question

我想通过单击第一个元素然后单击第二个元素来定义两个 dom 元素之间的关系（在我的特定情况下，在节点之间画线）。以下是我的方法。我不认为它特别优雅或干净。有没有更好的方法可以做到这一点？

$(function() {
   var State = {
      initialClick: false, // tracks clicks status for drawing lines
      initialID: undefined // remember data gotten from the first click
   };
   ...
   $map.on('click', '.node', function() {
     var $this = $(this),
         currentID = $this.attr('data-id');
     if (State.initialClick) {
        if (State.initialID === currentID) {
           // process first click
        } else {
           // process second click
        }
        resetClickTracking();
     } else {
        setState(currentID);
     }
  });
  ...

  function setState(id) {
     State.initialClick = true;
     State.initialID = id;
  }
  function resetState() {
     State.initialClick = false;
     State.initialID = undefined;
  }
});

Answer 1

我可能会选择委托模式：

var lastNodeClicked = null;
$map.on('click', '.node', function() {
    if (lastNodeClicked && lastNodeClicked !== this) {
        // draw line
        lastNodeClicked = null; // reset
    } else {
        lastNodeClicked = this;
    }
});

除了重置上次点击的节点，您还可以使用单击的节点无条件地更新它;这样您就可以用更少的点击来绘制线条;-）