javascript對點選事件和拖動事件的區分

1.專案中，為了更好的服務使用者，經常會設計一個便捷的通道，這個通道一般都是“懸浮”的。

由於是懸浮的，那麼就會考慮使用者會出現哪幾種可能的操作，一個是直接點選，另外一種就是在螢幕上先拖動幾下，然後再點選。

那麼為了完美的實現這個需求，那麼該怎麼辦呢？

最重要的就是要區分點選事件和拖動事件。

我們都知道，點選事件是被點選的物件可看做是靜止不動的，而拖動事件的物件很明顯是移動的。

那麼思路就應該是先判斷事件物件是否有移動的現象，

但是由於不管是在點選事件和拖動事件，其都有一個滑鼠按下的一個過程和一個鬆開的過程，只不過拖動事件多了一個拖動動作。

那麼完整的思路應是這樣的：

第一：先寫出滑鼠按下的函式；

第二：編寫物件是否被拖動的函式；

第三：判斷物件是否相對原先位置產生了位移；

第四：編寫滑鼠鬆開之後的程式碼；

完整程式碼如下：

var timmerHandle = null;   //先設定一個定時器處理；

var isDrag = false;             //宣告拖動的預設狀態是：否

//建立目標被點選（滑鼠按下）的函式

function entranceDivDown (){

  console.log(“mouse down.”);

  isDrag = false;

  //延遲100ms

  timmerHandle = setTimeout(setDragTrue,200);

}

function setDragTrue (){

  isDrag = true;

}

//建立目標被拖動的函式

function entranceDivMove (){

  //可以使用isDrag來判斷是移動還是拖動

  var entrance = document.getElementById(“entrance”);

  entrance.onmousedown = function(ev){

    var oevent = ev || event;

    var distanceX = oevent.clientX – entrance.offsetLeft;

    var distanceY = oevent.clientY – entrance.offsetTop;

    document.onmousemove = function(ev){

      var oevent = ev || event;

      entrance.style.left = oevent.clientX – distanceX + `px`;

      entrance.style.top = oevent.clientY – distanceY + `px`;

    };

    document.onmouseup = function(ev){

      document.onmousemove = null;

      document.onmouseup = null;

    };

  };

}

//建立目標滑鼠釋放的函式

function entranceDivUp (){

  if (!isDrag){

    //先把doMouseDownTimmer清除，不然200毫秒後setGragTrue方法還是會被呼叫的

    clearTimeout(timmerHandle);

    console.log(“mouse up.”);

    activity_id = sessionStorage.getItem(`activity_id`);    //獲取活動id

    var url =  globalConfig.pre_api_url + “/wall/index.php?activity_id=” + activity_id;  //活動路徑

    window.open(url);

  }else{

    isDrag = false;

    console.log(“draging over.”);

  }

}

感謝閱讀

喜歡看小編文章的點個訂閱或者喜歡！小編每天都會跟大家分享文章，也會給大家提供web前端學習資料。