事件觸發時的Javascript激活功能

我寫了一些基於類似ecc事件的Javascript函數。。事件觸發時的Javascript激活功能

的下面碼本的第一部分是用於特定任務1：

document.addEventListener('click', onDocumentMouseClick, false); 

function onDocumentMouseClick(event) {/* some code */}

和低於該代碼是用於TASK2，三個功能（onDocumentMouseMove，onDocumentMouseDown，onDocumentMouseUp）一起工作：

document.addEventListener('mousemove', onDocumentMouseMove, false); 
document.addEventListener('mousedown', onDocumentMouseDown, false); 
document.addEventListener('mouseup', onDocumentMouseUp, false); 

function onDocumentMouseMove(event) {/* some code */} 
function onDocumentMouseDown(event) {/* some code */} 
function onDocumentMouseUp(event) {/* some code */}

現在我的問題是：我需要通過按鈕分別激活兩個任務功能，例如，如果我點擊button1激活了task1的功能，並且如果我點擊button2激活了task2的功能。

來源

2014-12-02 stefano

我不明白你的問題。「激活功能」是什麼意思？你想在用戶點擊button1時調用'onDocumentMouseClick'嗎？ – 2014-12-02 20:09:56

是的。。。。。。。。 – stefano 2014-12-02 20:21:12

我回答了你的問題嗎？如果是這樣，請接受答案。 – 2014-12-02 22:34:29

只需使用一個簡單的標誌...

var Mode = 1; 

function onDocumentMouseClick(event) { 
    if(Mode==1){ 
     /* some code */ 
    } 
} 

function onDocumentMouseMove(event) { 
    if(Mode==2){ 
     /* some code */ 
    } 
} 
function onDocumentMouseDown(event) { 
    if(Mode==2){ 
     /* some code */ 
    } 
} 
function onDocumentMouseUp(event) { 
    if(Mode==2){ 
     /* some code */ 
    } 
} 

function Button1_Click(){ 
    Mode=1; 
} 
function Button2_Click(){ 
    Mode=2; 
}

方法2：

function Button1_Click(){ 
    document.removeEventListener('mousemove', onDocumentMouseMove, false); 
    document.removeEventListener('mousedown', onDocumentMouseDown, false); 
    document.removeEventListener('mouseup', onDocumentMouseUp, false); 
    document.addEventListener('click', onDocumentMouseClick, false); 
} 
function Button2_Click(){ 
    document.removeEventListener('click', onDocumentMouseClick, false); 
    document.addEventListener('mousemove', onDocumentMouseMove, false); 
    document.addEventListener('mousedown', onDocumentMouseDown, false); 
    document.addEventListener('mouseup', onDocumentMouseUp, false); 
}

來源

2014-12-02 19:46:00 Banana

爲什麼downvote？ – Banana 2014-12-02 19:46:57

有沒有比這更優雅的方式？ – stefano 2014-12-02 19:48:41

您可以取消註冊並重新註冊按鈕單擊事件處理程序，但那不會更優雅... – Banana 2014-12-02 19:50:55

你的按鈕可以調用你設置的事件監聽器相同的功能。快速和骯髒的方法是將onclick="onDocumentMouseClick()"寫入按鈕1的button標記和按鈕2的onclick="onDocumentMouseMove();onDocumentMouseDown();onDocumentMouseUp()"。

但是，爲每個按鈕編寫一個單獨的函數會更乾淨。然後，如果任務定義發生變化，則只需更新函數而不是編輯HTML。下面的代碼片段演示了這種方法。

請注意，當您單擊某個按鈕時，除了您在任務函數中進行的調用之外，還會觸發鼠標按下，鼠標移動和鼠標單擊事件。因此，你會看到每個按鈕點擊多次調用事件處理程序。要確定事件處理程序是由事件觸發還是由任務函數調用，可以檢查參數event的值，如下所示。

var messageCounter = 0; 
 
function message(text) { 
 
    messageCounter += 1; 
 
    document.getElementById('messages').innerHTML = '<b>'+messageCounter+'</b> ' + 
 
     text + '<br />' + document.getElementById('messages').innerHTML; 
 
} 
 

 
document.addEventListener('click', onDocumentMouseClick, false); 
 

 
function onDocumentMouseClick(event) { 
 
    message('onDocumentMouseClick (' + 
 
     (event === undefined ? '<b>TASK</b>' : 'event')+')'); 
 
} 
 

 
// The code below is for task2; these three functions work together. 
 
document.addEventListener('mousemove', onDocumentMouseMove, false); 
 
document.addEventListener('mousedown', onDocumentMouseDown, false); 
 
document.addEventListener('mouseup', onDocumentMouseUp, false); 
 

 
function onDocumentMouseMove(event) { 
 
    message('onDocumentMouseMove (' + 
 
     (event === undefined ? '<b>TASK</b>' : 'event')+')'); 
 
} 
 
function onDocumentMouseDown(event) { 
 
    message('onDocumentMouseDown (' + 
 
     (event === undefined ? '<b>TASK</b>' : 'event')+')'); 
 
} 
 
function onDocumentMouseUp(event) { 
 
    message('onDocumentMouseUp (' + 
 
     (event === undefined ? '<b>TASK</b>' : 'event')+')'); 
 
} 
 

 
function button1() { 
 
    onDocumentMouseClick(); 
 
} 
 

 
function button2() { 
 
    onDocumentMouseMove(); 
 
    onDocumentMouseDown(); 
 
    onDocumentMouseUp(); 
 
}

<button onclick="button1()">button 1</button> 
 

 
<button onclick="button2()">button 2</button> 
 

 
<div id="messages"></div>

來源

2014-12-02 21:01:51

事件觸發時的Javascript激活功能

回答

相關問題