事件触发时的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的功能。

我不明白你的问题。 “激活功能”是什么意思？你想在用户点击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); 
}

为什么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>

事件触发时的Javascript激活功能

相关推荐