跟踪和使用顺序点击的方法

时间:2012-12-06 15:35:19

标签: javascript

我想定义两个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;
  }

});

1 个答案:

答案 0 :(得分:1)

我可能会选择代表模式:

var lastNodeClicked = null;

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

您可以无条件地使用单击的节点更新它,而不是重置最后一次单击的节点;这样你就可以用更少的点击来画线; - )