事件触发时的JavaScript激活功能

Question

我根据诸如click ecc之类的事件编写了一些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，则激活任务1的功能，如果我单击button2，则激活任务2的功能。

Answer 1

只需使用一个简单的标志...

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 );
}

Answer 2

您的按钮可以调用与事件侦听器相同的功能。 快速而肮脏的方法是将onclick="onDocumentMouseClick()"写入button1的button标记中，并将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>