點擊事件調用多個函數

Question

我有兩個函數在用戶單擊按鈕時調用； 第一個是計時器將關閉，第二個開始記錄鼠標移動的距離。 當用戶單擊第二個按鈕時，計時器和記錄停止，數據被添加到數組中。 盡管在單擊事件期間嘗試調用兩個不同的函數時，我的代碼似乎不起作用。 另外，如何將鼠標以像素為單位移動的距離再次重置為零？ 任何幫助將不勝感激，謝謝！

var c=0;
var t;
var timer_is_on=0;
var timers = new Array();
var count = 0;
var mouseclickPositionList = new Array();
var mouseDistance = new Array();
var totalTravelled = 0;
var xTravelled = 0;
var yTravelled = 0;
var prevX, prevY, count = 0
var select = false;

function printMousePos(e) {
    var cursorX = e.clientX;
    var cursorY = e.clientY;
    prevY && (yTravelled += Math.abs(e.pageY - prevY));
    prevX && (xTravelled += Math.abs(e.pageX - prevX));

    prevX = e.pageX;
    prevY = e.pageY;

    totalTravelled = yTravelled + xTravelled;
    mouseDistance.push(totalTravelled);
    prevX, prevY, totalTravelled = 0;
}

document.addEventListener("click", function() {
    printMousePos();
    doTimer();
} 

function timedCount() {
    t = setTimeout("timedCount()", 1000);
}

function doTimer() {
    if (!timer_is_on) {
        timer_is_on = 1;
        timedCount();
    }
}

function stopCount() {
    clearTimeout(t);
    timer_is_on = 0;
    timers.push(t);
}

Answer 1

您的函數printMousePos(e)需要輸入數據來處理鼠標位置。 因此，只需將偵聽器注冊更改為以下形式：

document.addEventListener("click", function(e) {
  //optionally put here code to stop bubbling the event
  printMousePos(e);
  doTimer();
}

如果 js 文件或腳本塊中有錯誤，則不會處理剩余的代碼。 您的函數printMousePos(e)這樣做，因為它使用未提供的輸入屬性 'e' 運行。 只需查看瀏覽器控制台即可識別問題。