在條件下收聽鼠標事件

僅當單擊複選框時纔想「聽」鼠標事件。因此，我有以下代碼：在條件下收聽鼠標事件

HTML

<input type="checkbox" id="magicLens" onchange="magicLens()"> 
<label for="magicLens">Magic Lens</label>

function magicLens(){ 
    const magicLens_checked = document.getElementById('magicLens').checked; 

    if (magicLens_checked === true){ 
     canvas.addEventListener('mousemove', e => { 
     myAnonymous = arguments.callee; 
     ... 
     // draw something at the current mouse position 
     // and therefore use the 'e' event object 
    }); 
    } 
    else { 
     canvas.removeEventListener('mousemove', myAnonymous); 
    } 
}

問題是，該圖（a透鏡）時的複選框未被選中時，也會發生（ false）。我甚至不確定removeEventListener()是否是對付它的正確方法（儘管我已經嘗試了沒有它的所有東西，結果也是一樣的）。

也許你有更好的想法來描述標題中的問題。隨意編輯！

來源

2017-06-12 Muad

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee – Teemu

如何在開始時添加mousemove監聽器並在裏面檢查magicLens是否被選中並決定繪製或不？ – ReadyFreddy

使用'arguments.callee'是不好的做法，所以請嘗試使用命名函數 – vassiliskrikonis

實際上總是傾聽事件並且在那裏檢查複選框是否被選中會更容易。

const canvas = document.getElementById('canvas'); 

canvas.addEventListener('mousemove', e => { 
    const magicLens_checked = document.getElementById('magicLens').checked; 

    if (!magicLens_checked) { 
     return; 
    } 

    // Do something with e 
    console.log(e); 
});

您可以在此Fiddle中查看。（我添加了事件監聽器到文檔，以避免創建一個任意的畫布，但它以同樣的方式）

來源

2017-06-12 11:43:29

這將工作。謝謝！是不是有點「性能關鍵」，因爲它總是創建一個新的變量，並檢查光標移動時的if條件（即使我不需要它）？ – Muad

幾乎沒有。（我希望我不會說任何錯誤，但是...）在JavaScript中，我們不會將變量分配給內存，而是它們是對象的引用。這些使用'new'關鍵字實例化。關於if條件檢查，我創建了一個jsperf片段來顯示它幾乎沒有區別：https://jsperf.com/if-case-in-mouseevent –

好的，再次感謝你！絕對比'removeEventListener（）'更簡單的方法... – Muad

Javascript引擎看到你傳遞給addEventListener和removeEventListener作爲兩個不同的函數，這就是爲什麼removeEventListener不工作。在這些之外創建一個命名函數並將其傳遞給它們。

來源

2017-06-12 11:44:19

在條件下收聽鼠標事件

回答

相關問題